โŠž The modern way to work with tables. Blazing fast facet-filtering, sorting, and searching.

Overview

Table Elements

The easiest way to integrate Meilisearch into your frontend as a data source for your tables. These components will allow you to kick-start the development of feature-rich & configurable table UIs, including a beautiful, blazing-fast (!) UX.

๐Ÿ™ Features

This Vue component library comes with the following features, improvements to the table element:

  • <table-v2 />
    • quickly spin up a highly-configurable table UI without worrying about the backend
    • "facet-filtering" & "table head sorting" natively built-in
    • Meilisearch & Laravel Scout API compatible
    • Enterprise-ready
    • Soon: Algolia integration

Get granular control over the table appearance & behavior, with the following (optional) components:

  • <table-search />

    • configure your search input for blazing fast search results
  • <table-filters />

    • overwrite the default display of your table's filters
  • <table-pagination />

    • easily configure the pagination of your table
  • <table-configure />

    • simple way to configure the table in HTML semantic fashion

Read more about these features in their respective docs.

๐Ÿ’ก Get Started

To get started, you simply need to install the @openweb/table-vue npm package.

npm install @openweb/table-vue

Next up, we need to make use of the components.

<script setup>
import { TableConfigure, TableV2 } from 'table-vue'
</script>

<template>
  <!-- the `type`-property indicates to Meilisearch the "index" you want to target   -->
  <TableV2 type="movies" />

  <!-- these are the default properties (all of them are optional)  -->
  <TableV2
    src="127.0.0.1:7700"
    cols="*"
    :searchable="true"
    :filterable="true"
    :sortable="true"
    :actionable="true"
    :per-page="20"
  />

  <!-- alternatively, you may configure your table by using these 2 components in combination -->
  <TableV2
    columns="id, title, poster, overview, release_date"
    sortable="release_date"
    actionable="Edit"
    per-page="20"
  />

  <TableConfigure
    source="search.ow3.org/api"
    type="movies"
    searchable="title, overview"
    filterable="genre, director"
  />
</template>

Check out the index.html & App.vue to get an idea how to implement a modern table.

๐Ÿงช Testing

yarn test

๐Ÿ“ˆ Changelog

Please see our releases page for more information on what has changed recently.

๐Ÿ’ช๐Ÿผ Contributing

Please see CONTRIBUTING for details.

๐Ÿ Community

For help, discussion about best practices, or any other conversation that would benefit from being searchable:

Table Elements on GitHub

For casual chit-chat with others using this package:

Join the Open Web Discord Server

๐Ÿ“„ License

The MIT License (MIT). Please see LICENSE for more information.

Made with โค๏ธ by Open Web Labs.

Comments
Releases(v0.0.11)
Owner
Open Web
Open Web (OW3)โ€”where web2 greatness meets web3 mindsetโ€”is a decentralized community that develops progressive, open web standards.
Open Web
Loads items in lazy way to achieve high performance and better UX in large lists

Lazy Load List Lazy Load List is a lightweight web package that loads items in lazy way to achieve high performance and better UX in large lists. Rend

OMER ANWAR 22 Dec 26, 2022
โšก๏ธ The easiest way to build forms with Vue.

Documentation Website What is Vue Formulate? Vue Formulate is the easiest way to build forms with Vue. Please read the comprehensive documentation for

Braid 2.2k Dec 30, 2022
Carpatin is a React JS Admin Dashboard Template that focuses on the management flows of a back-office application. We leverage the Material-UI power of stylizing the components in a way that feels more professional.

Carpatin Dashboard Free Carpatin is a React Js Admin Dashboard Template that focuses on the management flows of a back-office application. We leverage

Devias 64 Dec 12, 2022
@auth0/auth0-spa-js wrapper in the "Vue way", with full TS support

vue-auth0 This is a wrapper around @auth0/auth0-spa-js meant to ease the usage into Vue projects. This is heavily inspired by the snippet into Auth0 o

Dreamonkey S.r.l. 5 Oct 18, 2022
VGENT โ€“ Vue Agent, that helps you to develop in a more effective way

VGENT is a CLI tool that generates boilerplate files for components, pages in your Nuxt.js or Vue.js project.A file generator for Nuxt.js

Arman Kuanysh 20 Dec 29, 2022
Bionic ReadingTool - Convert Text into Better Way to Read Faster

?? Bionic ReadingTool A revolutionary way for guiding the eyes through text using artificial fixation spots to make reading easier. As a result, the r

Lucian Daniel Crisan 335 Dec 24, 2022
Wiki.js | A modern and powerful wiki app built on Node.js

A modern, lightweight and powerful wiki app built on NodeJS Official Website Documentation Requirements Installation Demo Change Log Feature Requests

requarks.io 19.5k Jan 5, 2023
Admin UI Template is a modern, responsive, and customizable admin UI template for your business.

Admin UI Template is a modern, responsive, and customizable admin UI template for your business. It contains reusable components, theme color, and design support along with dark theme support.

Open Template Hub 7 Dec 18, 2022
100 Modern CSS Buttons, Free And Royalty Free.

?? Contributions Currently, there are 100 buttons in this project, but weโ€™d love to have more! If you have new button ideas, create an Issue. If you h

null 2.7k Jan 7, 2023
Catamyst Frontend Stack - Discussion and demo for Frontend Web Development with Modern Tech Stack

Catamyst Frontend Stack Discussion and demo for Frontend Web Development with Modern Tech Stack. Made by M Haidar Hanif from Catamyst. Haidar is the F

Catamyst Community 48 Dec 24, 2022
:necktie: :briefcase: Build fast :rocket: and easy multiple beautiful resumes and create your best CV ever! Made with Vue and LESS.

best-resume-ever ?? ?? Build fast ?? and easy multiple beautiful resumes and create your best CV ever! Made with Vue and LESS. Cool Creative Green Pur

Sara Steiert 15.8k Jan 9, 2023
Most modern mobile touch slider with hardware accelerated transitions

Get Started | Documentation | Demos Swiper Swiper - is the free and most modern mobile touch slider with hardware accelerated transitions and amazing

Vladimir Kharlampidi 33.7k Jan 4, 2023
Modern ThreeJS boilerplate powered by Vite & Typescript

Modern ThreeJS โšก๏ธ Modern ThreeJS boilerplate powered by Vite & Typescript. Features Powered with Vite ?? GUI controls using Tweakpane ?? Typescript ??

Alvaro Saburido 64 Jan 4, 2023
Modern Vue Stack 2022. Joyful development experience ๐ŸŽ‰

Modern Vue Modern Vue stack 2022 with Micro front end & Monorepo ?? . Joyful development experience ?? . The main branch will keep clean for quickly c

han 263 Dec 18, 2022
A modern, zero-dependency uptime monitoring tool & status page based on GitHub Actions & Nuxt Content v2.

StatusBase Uptime monitoring tool & beautiful status pages Powered by Nuxt Content v2! Free โ€ข Open Source โ€ข Notification View Demo ยท Report Bug ยท Requ

zernonia 208 Dec 27, 2022
A modern, zero-dependency uptime monitoring tool & status page based on GitHub Actions & Nuxt Content v2.

StatusBase Uptime monitoring tool & beautiful status pages Powered by Nuxt Content v2! Free โ€ข Open Source โ€ข Notification View Demo ยท Report Bug ยท Requ

StatusBase 194 Jul 5, 2022
Make Phaser 3 games with modern frontend tooling.

Phaser 3 + Vite.js Template Make Phaser 3 games with modern frontend tooling. Prerequisites You'll need Node.js and npm installed. It is highly recomm

ourcade 15 Dec 15, 2022
๐ŸŽ A tiny and fast GraphQL client for Vue.js

villus Villus is a finger-like structures in the small intestine. They help to absorb digested food. A small and fast GraphQL client for Vue.js. This

Abdelrahman Awad 639 Jan 8, 2023