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.
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 & Typesense 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.
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>
<!-- the `type`-property indicates to to the search engine the "index" you want to target -->
<TableV2 type="movies" />
<!-- these are the default properties (all of them are optional) -->
<TableV2
source="127.0.0.1:7700"
columns="*"
:searchable="true"
:filterable="true"
:sortable="true"
:actionable="true"
:selectable="false"
:per-page="20"
/>
<!-- another "data table" example -->
<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.
yarn test
Please see our releases page for more information on what has changed recently.
Please see CONTRIBUTING for details.
For help, discussion about best practices, or any other conversation that would benefit from being searchable:
For casual chit-chat with others using this package:
Join the Open Web Discord Server
The MIT License (MIT). Please see LICENSE for more information.
Made with โค๏ธ by Open Web Labs.