UiSvelte

Table & useTable

A powerful data table component with built-in pagination, sorting, search capabilities, and row selection. Supports both client-side and server-side data handling with automatic state management.

Preview

ID
Name
Email
Role
Title

Description Error

No data

There are no records to display

Builder

Example Type
Table Size
Pagination Align
Table Options
Toolbar Options

useTable Hook Configuration

The useTable hook accepts a configuration object. When data is provided, it operates in client-side mode with local filtering, sorting, and pagination. When only url is provided, it operates in server-side mode.

The component accepts the following props:

Prop
Type
Default
Title

Description Error

No data

There are no records to display

Column Configuration

Each column in the columns array should follow this structure:

The component accepts the following props:

Prop
Type
Default
Title

Description Error

No data

There are no records to display

Table Component Props

The Table component accepts these props for customization:

The component accepts the following props:

Prop
Type
Default
Title

Description Error

No data

There are no records to display

Toolbar Props

The Table component includes a built-in toolbar with search, rows per page selector, and custom slots:

The component accepts the following props:

Prop
Type
Default
Title

Description Error

No data

There are no records to display

Selection Props

When row selection is enabled (selectable: true in useTable config), the following props customize the selection behavior:

The component accepts the following props:

Prop
Type
Default
Title

Description Error

No data

There are no records to display

Return Value (TableState)

The useTable hook returns a TableState object with the following properties and methods:

The component accepts the following props:

Prop
Type
Default
Title

Description Error

No data

There are no records to display

Key Features

  • Flexible Data Sources: Supports both client-side (data prop) and server-side (url prop) data
  • Automatic Pagination: Built-in pagination with customizable page sizes
  • Sorting Support: Column-based sorting with ASC/DESC order. Add sortable: true to column config
  • Search & Filter: Integrated search with debouncing support
  • Built-in Toolbar: Search input, rows per page selector, and total count display
  • Custom Toolbar Slots: Add custom buttons or content using toolbarStart/toolbarEnd snippets
  • Custom Rendering: Use snippets to customize cell content
  • Loading States: Automatic loading indicators with skeleton loaders
  • Empty States: Customizable empty state messages and icons
  • Responsive Design: Mobile-friendly with horizontal scroll
  • Row Selection: Built-in checkbox selection with select all, indeterminate state, and custom actions

© 2025 UiSvelte