@flowbite-svelte-plugins/datatable

Documentation

Use the datatable component to search, sort, filter and paginate table data of rows and columns for your web application.

The datatable component examples are open-source under the MIT License and they are based on the simple-datatables repository from GitHub.

Installation

pnpm i -D @flowbite-svelte-plugins/datatable simple-datatables

app.css

@source "../node_modules/simple-datatables/dist";
@source "../node_modules/@flowbite-svelte-plugins/datatable/dist";

.datatable-pagination .datatable-active a,
.datatable-pagination .datatable-active a:focus,
.datatable-pagination .datatable-active a:hover,
.datatable-pagination .datatable-active button,
.datatable-pagination .datatable-active button:focus,
.datatable-pagination .datatable-active button:hover {
  background-color: #ffe4de;
  cursor: default;
}

.datatable-wrapper .datatable-table tbody tr.selected {
  background-color: #fff1ee !important;
}

Default datatable

Use this example to show table data with default sorting and pagination functionalities.

<script lang="ts">
  import { Table } from '@flowbite-svelte-plugins/datatable';
  import items from './data/sample.json';
</script>

<Table {items} />