Skip to content
/ table Public
generated from stacksjs/stacks

πŸ”Ž The modern way to work with tables. Blazing fast facet-filtering, sorting, and searching.

License

Notifications You must be signed in to change notification settings

stacksjs/table

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

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:

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

πŸ’‘ 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>
  <!-- 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.

πŸ§ͺ 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.

About

πŸ”Ž The modern way to work with tables. Blazing fast facet-filtering, sorting, and searching.

Topics

Resources

License

Code of conduct

Security policy

Stars

Watchers

Forks

Sponsor this project

 

Contributors 4

  •  
  •  
  •  
  •