The easy & modern way to work with tables of any size. Blazing-fast searching, filtering, sorting, and paginating

Last update: May 25, 2022

Table Stack

The easy & modern way to work with tables of any size. Blazing-fast searching, filtering, sorting, and paginating. Powered by your search engine of choice. Kick-start the development of a feature-rich & configurable table UI, including a beautiful default UX.

🐙 Features

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

    • 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 & Typesense integration

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

    • configure your search input for blazing fast search results
    • overwrite the default display of your table's filters
    • easily configure the pagination of your table
    • 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 @ow3/table-vue npm package.

npm install @ow3/table-vue

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

">
<script setup>
import { Table as TableV2 } from 'table-vue'
script>

<template>
  
  <TableV2 type="movies" />

  
  <TableV2
    source="127.0.0.1:7700"
    columns="*"
    :searchable="true"
    :filterable="true"
    :sortable="true"
    :actionable="true"
    :selectable="false"
    :per-page="20"
  />

  
  <TableV2
    source="127.0.0.1:7700"
    password="NtUvZv5Q87e355b807622149c350ac38679645b4e2603a1d3eb48cda080f977e76329aeb"
    type="orders"
    columns="id: Order, customer_name: Customer, customer_po: PO#, part_name: Part, created_at: Ordered, due_at: Due, stage_name: Status"
    sort="id:desc"
    sorts="id, customer_name, customer_po, part_name, stage_name, due_at, created_at"
    filters="customer_name, vendor_name, part_name, document_types"
    actions="Edit"
    per-page="10"
    selectable="true"
  />
template>

To learn more about what's possible & how to best build modern data tables, check out our documentation.

🧪 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.

GitHub

https://github.com/openwebstacks/table
Comments
An easy to use powerful data table for vuejs with advanced customizations including sorting, column filtering, pagination, grouping etc
An easy to use powerful data table for vuejs with advanced customizations including sorting, column filtering, pagination, grouping etc

Vue-good-table An easy to use, clean and powerful data table for VueJS with essential features like sorting, column filtering, pagination and much mor

Jul 1, 2022
Jun 18, 2022
A set of Vue.js components to display datasets (lists) with filtering, paging, and sorting capabilities!
A set of Vue.js components to display datasets (lists) with filtering, paging, and sorting capabilities!

A set of Vue.js components to display datasets (lists) with filtering, paging, and sorting capabilities!

Jun 21, 2022
A set of Vue.js components to display datasets (lists) with filtering, paging, and sorting capabilities!

A set of Vue.js components to display datasets (lists) with filtering, paging, and sorting capabilities!

Sep 19, 2021
:tada: A dynamic table with sorting, filtering, editing, pagination, multiple select, etc.
:tada: A dynamic table with sorting, filtering, editing, pagination, multiple select, etc.

vue-table-dynamic English | 简体中文 vue-table-dynamic is a vue component of dynamic table. It's designed to respond to data changes in real time, and ori

Jun 17, 2022
The easiest way to integrate Meilisearch into your frontend as a data source for your tables

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-s

Jun 30, 2022
Easy creation and management of Inertia tables using Eloquent models
Easy creation and management of Inertia tables using Eloquent models

Inertia Table Easily create tables using InertiaJS (and Tailwind CSS) and Laravel Models. Tables can be filtered and sorted. Can scaffold an entire mo

Jun 30, 2022
:rocket: The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more.
:rocket: The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more.

bootstrap-select The jQuery plugin that brings select elements into the 21st century with intuitive multiselection, searching, and much more. Now with

Jun 29, 2022
:bento: Vue.js 2.x responsive grid system with smooth sorting, drag-n-drop and reordering
:bento:  Vue.js 2.x responsive grid system with smooth sorting, drag-n-drop and reordering

Vue.js Grid ( Experiment ) ⚠️ This an experement and not a production-ready plugin Fixed size grid for Vue.js This is very a first version of the plug

Jul 1, 2022
Vuejs-job-sorting - Simple Vue.js 3.0 app with a litlle TypeScript help
Vuejs-job-sorting - Simple Vue.js 3.0 app with a litlle TypeScript help

vuejs-job-sorting Simple app created with Vue.js 3.0 and Typescript

Jan 10, 2022
A Vue component to create tables with vertical and horizontal scrolling. Flexbox-based.

vue-scrolling-table A Vue component to create tables with vertical and horizontal scrolling. Flexbox-based. Demo There is a live demo here: https://ta

Mar 13, 2022
An advanced and flexible Vue.js 2.x component for displaying data tables.
An advanced and flexible Vue.js 2.x component for displaying data tables.

JD-Table An advanced and flexible Vue.js 2.x component for displaying data tables. Feature rich and capable of handling big data, JD-Table was designe

Apr 28, 2022
Interactive Tables and Data Grids for JavaScript
Interactive Tables and Data Grids for JavaScript

An easy to use interactive table generation JavaScript library

Sep 18, 2020
A vue.js component to create dynamic tables
A vue.js component to create dynamic tables

[WIP] Vue Datasource go back renew. Coming soon V3. Vue Datasource A Vue.js component to create dynamic tables. Compatible with Vue 2.x and Laravel. D

Jun 7, 2022
Vue component for rendering tables used in ENA projects

vue-table What's this Components to render a table using client or remote data Install npm install @myena/vue-table Dependencies Vue 2 Bootstrap 3 Fo

Nov 21, 2021
Inertia.js Tables for Laravel Query Builder

Inertia.js Tables for Laravel Query Builder This package provides a DataTables-like experience for Inertia.js with support for searching, filtering, s

Jul 2, 2022
Vue component for rendering tables used in ENA projects

vue-table What's this Components to render a table using client or remote data Install npm install @myena/vue-table Dependencies Vue 2 Bootstrap 3 Fo

Nov 21, 2021
vue3-easy-data-table is a simple and easy-to-use data table component made with Vue.js 3.x
vue3-easy-data-table is a simple and easy-to-use data table component made with Vue.js 3.x

Introduction vue3-easy-data-table is a simple and easy-to-use data table component made with Vue.js 3.x. The data table component in Vuetify 3 hasn't

Jun 27, 2022
Sortable — is a JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices.

Sortable — is a JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. No jQuery required. Supports Meteor, AngularJS, React, Polymer, Vue, Knockout and any CSS library, e.g. Bootstrap.

Sep 21, 2020