Table Extensions - Documentation

Enhance Your Tables

Our powerful table component comes with a suite of extensions designed to add rich functionality and improve user experience. These extensions can be easily integrated to provide features like sorting, pagination, filtering, and more.

Sorting

Enable users to sort data by clicking on column headers. This extension allows for single or multi-column sorting.

Basic Sorting

Clicking a header sorts the column in ascending or descending order.


table.enableSorting();

Multi-Column Sorting

Hold Shift while clicking subsequent headers to enable multi-column sorting.


table.enableSorting({ multiColumn: true });

The sorting algorithm is configurable, allowing custom data type handling.

Pagination

Break down large datasets into manageable pages. The pagination extension provides navigation controls to move between pages.

Configurable Page Size

Set the number of rows per page and allow users to change it.


table.enablePagination({
  rowsPerPage: 10,
  showRowsPerPageSelector: true
});

The extension automatically calculates the total number of pages and provides intuitive navigation buttons (First, Previous, Next, Last).

Filtering

Allow users to dynamically filter rows based on specific criteria. This can be applied globally or per column.

Global Filtering

A single search input filters across all visible columns.


table.enableFiltering(); // Basic global filter

Column-Specific Filtering

Add input fields to each column header for targeted filtering.


table.enableFiltering({
  columnFilters: true
});

Supports various filter types like text, number ranges, and dropdown selections.

Row Selection

Enable users to select one or multiple rows. This is useful for performing bulk actions.

Single Row Selection

Only one row can be selected at a time.


table.enableRowSelection({ type: 'single' });

Multi-Row Selection

Users can select multiple rows using checkboxes.


table.enableRowSelection({ type: 'multiple' });

Selected rows are visually highlighted, and their data can be accessed via the API.

Column Resizing

Allow users to resize columns by dragging the column header borders. This provides flexibility in viewing data.

Interactive Resizing

Enable resizing for all columns or specific ones.


table.enableColumnResizing();

Column widths are persisted (e.g., using local storage) for a better user experience across sessions.

Virtualization

For extremely large datasets, virtualization renders only the rows and columns currently visible in the viewport, significantly improving performance.

Performance Boost

Handles thousands of rows with minimal lag.


table.enableVirtualization();

This extension is crucial for maintaining a smooth user interface with massive amounts of data.