Svelte Data Table based on Flowbite Svelte, Flowbite Icons, and Tailwind
This data table is designed for viewing and editing data in an array of objects. It's built using the Flowbite Svelte library's Table components and works in conjunction with it, with support for custom cell editors, moving focus between cells with tab and enter, column sorting (simple and custom), conditional CSS, and more.
To add to an existing Svelte app, first install Tailwind if you haven't already:
> npx svelte-add@latest tailwindcssThen install the Flowbite components and icons along with the data table component.
> npm i flowbite-svelte flowbite flowbite-svelte-icons @emamid/svelte-data-table<script lang="ts">
import DataTable from '@emamid/svelte-data-table';
import type { ColumnConfig } from '@emamid/svelte-data-table';
const columns: ColumnConfig[] = [
{ canSort: true, key: 'firstName', title: 'First Name' },
{ canSort: true, key: 'lastName', title: 'Last Name' },
];
const items: any[] = [
{ firstName: 'Bilbo', lastName: 'Baggins'},
{ firstName: 'Frodo', lastName: 'Baggins'},
{ firstName: 'Samwise', lastName: 'Gamgee'},
{ firstName: 'Meriadoc', lastName: 'Brandybuck'},
{ firstName: 'Peregrin', lastName: 'Took'},
];
</script>
<main>
<DataTable
{columns}
{items}
/>
</main>Examples for most of the component's features are under /examples . You can find the documentation here.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent