svelte-table

A relatively minimal table component for Svelte that supports sorting, filtering, row selection, and row expansion.

Key Features:

• Sorting by column values
• Filtering capabilities per column
• Row selection (single or multiple)
• Expandable rows with custom content
• Customizable styling through class names
• Slot support for custom header, row, and expanded content rendering
• Events for column, row, cell, and expand interactions

Target Audience:
Developers building Svelte applications that need interactive table functionality with sorting and filtering capabilities.

Example Usage:

<script>
  import SvelteTable from "svelte-table";
  const rows = [/* data */];
  const columns = [/* column config */];
</script>

<SvelteTable columns={columns} rows={rows}>
  <svelte:fragment slot="expanded" let:row>
    {row.detail}
  </svelte:fragment>
</SvelteTable>

Column Configuration Options:

• Define sorting behavior (sortable)
• Custom filter options (filterOptions)
• Search functionality (searchValue)
• Custom rendering (renderValue or renderComponent)
• Cell/header styling (class, headerClass)

Row Features:

• Expandable rows with expanded slot
• Selectable rows with selected prop
• Custom row classes via classNameRow function
• Single/multiple expansion/selection options

Framework Support:
Primarily designed for Svelte, but also includes an IIFE version for use outside Svelte projects.

Example Project:
View on GitHub Pages