README.md

Table Elements

The easiest way to work with tables, and, in particular, data tables. Without much effort, configure a search engine in your frontend as the data source for your tables. These components will allow you to kick-start the development of a feature-rich & configurable table UI, 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 & 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.