Table Elements

The easiest way to integrate Laravel Scout or Meilisearch into your frontend. These components will allow you to kick-start the development of your next beautiful table UIs, including a blazing-fast UX.

🐙 Features

This cross-framework compatible (React, Vue, Svelte, Angular, HTML, etc.) web component library comes with the following features & "improvements" to the table element:

• <table-v2 />

  • quickly & simply develop a highly-configurable table UI without worrying about the backend
  • "facet filtering" & "table head sorting" natively built in
  • Meilisearch & Laravel Scout API compatible

• <table-configure />

  • simple way to configure the table in a HTML semantic fashion

Read more about these features in their respective docs.

💡 Usage

It's incredibly easy to use a Web Components within your own project. Check out the index.html to get an idea how it can be done.

<!-- the following props are required to be set either on this `table-configure` or `table-v2 element` -->
<table-configure
  source="127.0.0.1:7700"
  index="collections"
  cols="name, collection_published_at, created_at"
/>

<table-v2 />

<!-- optional props -->
<table-v2
  searchable="true"
  sorts="name, price, created_at"
  filters="traits_Head, traits_Body, traits_Background"
  actionable="true"
  per-page="20"
  use-pagination="true"
/>

🖥️ Browsers

Meema Elements is built for the modern web and avoids bloated polyfills and outdated environments as much as possible. Currently, it supports all browsers that fully implement the Custom Elements V1.

• Edge 79+
• Firefox 63+
• Chrome 67+
• Safari 13.1+
• Opera 64+
• iOS Safari 13.7+
• Android Browser 81+
• Opera Mobile 59+
• Chrome for Android 88+

🧪 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 Meema Discord Server

📄 License

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

Made with ❤️ by Meema, Inc.