Simple Table

https://www.simple-table.com/docs
Admin
Simple Table is a lightweight, feature-rich React table library offering extensive customization and...
Tokens:59,068
Snippets:521
Trust Score:4.6
Update:8 months ago
Show doc for...
Tokens:
Raw
### Install Simple Table using yarn

Source: https://www.simple-table.com/docs/installation

Installs the core Simple Table library using the yarn package manager. This command is an alternative to npm for managing project dependencies.

```shell
yarn add simple-table-core
```

--------------------------------

### Install Simple Table using pnpm

Source: https://www.simple-table.com/docs/installation

Installs the core Simple Table library using the pnpm package manager. This is another alternative for dependency management in your project.

```shell
pnpm add simple-table-core
```

--------------------------------

### Install Simple Table using npm

Source: https://www.simple-table.com/docs/installation

Installs the core Simple Table library using the npm package manager. This is the first step to integrating Simple Table into your project.

```shell
npm install simple-table-core
```

--------------------------------

### Basic Footer Renderer Implementation (React)

Source: https://www.simple-table.com/docs/footer-renderer

Demonstrates how to implement a custom footer renderer using React. The `footerRenderer` prop accepts a function that returns a ReactNode, allowing full control over the footer's appearance and functionality. This example shows a basic setup for custom pagination.

```javascript
import React from 'react';

const MyCustomFooter = ({ currentPage, totalPages, onPrevPage, onNextPage, hasPrevPage, hasNextPage }) => {
  return (
    <div>
      <button onClick={onPrevPage} disabled={!hasPrevPage}>Previous</button>
      <span> Page {currentPage} of {totalPages} </span>
      <button onClick={onNextPage} disabled={!hasNextPage}>Next</button>
    </div>
  );
};

// In your table component:
<SimpleTable
  // ... other props
  footerRenderer={MyCustomFooter}
/>
```

--------------------------------

### Live Updates for CPU History Chart (TypeScript)

Source: https://www.simple-table.com/docs/chart-columns

Demonstrates how to update chart data in real-time using TypeScript. This example shows updating a CPU history chart by adding new values and removing the oldest to maintain a constant array length. It utilizes `setInterval` for simulated real-time data fetching.

```typescript
1// Example: Update CPU history with live data
2const updateCPUHistory = (rowIndex: number, newValue: number) => {
  const row = data[rowIndex];
  const currentHistory = row.cpuHistory as number[];
  
  // Add new value and remove oldest (keep array length constant)
  const updatedHistory = [...currentHistory.slice(1), newValue];
  
  tableRef.current?.updateData({
    accessor: "cpuHistory",
    rowIndex: rowIndex,
    newValue: updatedHistory,
  });
};
15

16// Use with setInterval or WebSocket for real-time updates
17useEffect(() => {
18  const interval = setInterval(() => {
19    const newCPU = Math.random() * 100; // Simulate CPU reading
20    updateCPUHistory(0, newCPU);
21  }, 1000);
22  
23  return () => clearInterval(interval);
24}, []);
```

--------------------------------

### Configure Line/Area Chart Column (TypeScript)

Source: https://www.simple-table.com/docs/chart-columns

Example of a column definition for a line/area chart, suitable for displaying trends. Expects an array of numbers for the 'dailyViews' data.

```typescript
{
  accessor: "dailyViews",
  label: "Daily Views (30d)",
  width: 150,
  type: "lineAreaChart",
  tooltip: "Daily page views for the past 30 days",
  align: "center",
}

// Data structure
const row = {
  dailyViews: [500, 520, 485, 550, 575, 590, 610, ...], // 30 values
};
```

--------------------------------

### Handle Row Selection Changes in Simple Table

Source: https://www.simple-table.com/docs/row-selection

This example shows how to implement the `onRowSelectionChange` callback to handle user interactions with row selection. It logs the selected row's name and the total count of selected rows, and demonstrates calling a hypothetical `handleBulkOperations` function.

```javascript
const handleRowSelectionChange = ({ row, isSelected, selectedRows }) => {
  if (isSelected) {
    console.log(`Selected: ${row.name}`);
  } else {
    console.log(`Deselected: ${row.name}`);
  }
  
  // Convert Set to Array for further processing
  const selectedRowsArray = Array.from(selectedRows);
  console.log(`Total selected: ${selectedRowsArray.length}`);
  
  // Implement your business logic here
  handleBulkOperations(selectedRowsArray);
};

// Usage within SimpleTable component:
// <SimpleTable
//   // ... other props
//   enableRowSelection
//   onRowSelectionChange={handleRowSelectionChange}
//   // ... other props
// />
```

--------------------------------

### Nested Table Data Structure Example

Source: https://www.simple-table.com/docs/nested-tables

Demonstrates the expected data structure for nested tables, where child data is represented as nested arrays within parent objects. The property name for the nested array should match the `rowGrouping` configuration.

```javascript
const data = [
  {
    // Company level (Level 0)
    companyName: "TechCorp Global",
    industry: "Technology",
    founded: 2015,
    employees: 50000,
    // ... other company fields
    
    // Child divisions (Level 1)
    divisions: [
      {
        divisionId: "DIV-001",
        divisionName: "Cloud Services",
        revenue: "$15B",
        profitMargin: "35%",
        headcount: 250,
        location: "San Francisco, CA"
      },
      // ... more divisions
    ]
  },
  // ... more companies
];
```

--------------------------------

### Chart Customization Options (TypeScript)

Source: https://www.simple-table.com/docs/chart-columns

Provides examples of customizing chart columns using the `chartOptions` property in TypeScript. It illustrates how to configure line/area charts and bar charts with specific visual properties like minimum/maximum values, dimensions, colors, and spacing.

```typescript
1// Line/area chart with custom options
2{
  accessor: "cpuHistory",
  label: "CPU Usage",
  type: "lineAreaChart",
  width: 150,
  chartOptions: {
    min: 0,           // Minimum value for scaling
    max: 100,         // Maximum value for scaling
    width: 120,       // Chart width in pixels
    height: 35,       // Chart height in pixels
    color: "#3b82f6", // Line color (overrides theme)
    fillColor: "#93c5fd",     // Area fill color
    fillOpacity: 0.3,         // Fill opacity (0-1)
    strokeWidth: 2            // Line thickness
  }
}
18

19// Bar chart with custom options
20{
  accessor: "quarterlyRevenue",
  label: "Quarterly",
  type: "barChart",
  width: 140,
  chartOptions: {
    min: 0,           // Minimum value for scaling
    max: 100000,      // Maximum value for scaling
    width: 120,       // Chart width in pixels
    height: 40,       // Chart height in pixels
    color: "#10b981", // Bar color (overrides theme)
    gap: 3            // Gap between bars in pixels
  }
}
```

--------------------------------

### Configure SimpleTable with Custom Theme Properties (React TSX)

Source: https://www.simple-table.com/docs/custom-theme

This example demonstrates how to apply custom theme properties to the SimpleTable component in a React TSX application. It shows how to set properties like rowHeight, headerHeight, borderWidth, and nestedGridMaxHeight to customize the table's appearance and behavior.

```tsx
import { SimpleTable } from 'simple-table-core';
import 'simple-table-core/styles.css';

export default function MyTable() {
  return (
    <SimpleTable
      defaultHeaders={headers}
      rows={data}
      customTheme={{
        // Row and header dimensions
        rowHeight: 48,
        headerHeight: 56,
        footerHeight: 60,
        
        // Border widths
        rowSeparatorWidth: 1,
        borderWidth: 2,
        pinnedBorderWidth: 3,
        
        // Nested grid configuration
        nestedGridBorderWidth: 2,
        nestedGridPaddingTop: 12,
        nestedGridPaddingBottom: 12,
        nestedGridPaddingLeft: 20,
        nestedGridPaddingRight: 20,
        nestedGridMaxHeight: 400,
        
        // Column dimensions
        selectionColumnWidth: 50,
      }}
    />
  );
}
```

--------------------------------

### Configure Bar Chart Column (TypeScript)

Source: https://www.simple-table.com/docs/chart-columns

Example of a column definition for a bar chart, ideal for comparing discrete values. Requires an array of numbers for the 'weeklyOrders' data.

```typescript
{
  accessor: "weeklyOrders",
  label: "Weekly Orders",
  width: 130,
  type: "barChart",
  tooltip: "Orders per week over the past 7 weeks",
  align: "center",
}

// Data structure
const row = {
  weeklyOrders: [23, 28, 31, 25, 29, 35, 38], // 7 values
};
```

--------------------------------

### Get Table Headers

Source: https://www.simple-table.com/docs/api-reference

Returns the table's current header/column definitions. Includes all column configuration such as accessors, labels, types, and formatting options. Useful for dynamic table manipulation, export configurations, or building custom UI controls.

```typescript
getHeaders() => HeaderObject[]
```

--------------------------------

### Enable Basic Column Editing in Simple Table

Source: https://www.simple-table.com/docs/column-editing

This snippet demonstrates the fundamental setup for enabling column editing in Simple Table. It requires `selectableColumns` to be true and uses `editColumns` to activate the editing interface. The `columnEditorConfig` prop is used to customize the appearance and behavior of the column editor, including button text and search functionality.

```jsx
<SimpleTable
  editColumns={true}
  columnEditorConfig={{
    text: "Columns", 
    searchEnabled: true, 
    searchPlaceholder: "Search columns...", 
    searchFunction: (header, searchTerm) => {
      return header.label.toLowerCase().includes(searchTerm.toLowerCase());
    }
  }}
  selectableColumns={true}
/>
```

--------------------------------

### Get Visible Table Rows

Source: https://www.simple-table.com/docs/api-reference

Returns the currently visible rows in the table. When pagination is enabled, this returns only the rows on the current page. When filters are applied, it returns only filtered rows. This is useful for getting a snapshot of what the user is currently viewing.

```typescript
getVisibleRows() => TableRow[]
```

--------------------------------

### Selection Behavior and Keyboard Navigation

Source: https://www.simple-table.com/docs/cell-highlighting

Explains how users can interact with selected cells and columns, along with the available keyboard shortcuts for navigation and selection.

```APIDOC
## Selection Behavior

When selection is enabled, users can:
  * Click on individual cells to select them
  * Click on column headers to select entire columns
  * Use keyboard shortcuts (Ctrl+C/⌘+C) to copy selected data
  * Paste the data into spreadsheet applications

## Keyboard Navigation

Cell selection supports powerful keyboard shortcuts for efficient navigation and selection:

* **Shift + Arrow Keys**: Extend selection in the direction of the arrow
* **Ctrl/⌘ + A**: Select all cells
* **Ctrl/⌘ + Shift + Arrow Keys**: Extend selection to edge of data region
* **Home / End**: Navigate to first/last column in current row
* **Ctrl/⌘ + Home / End**: Navigate to first/last cell in table
* **Page Up / Page Down**: Navigate up/down by visible page
```

--------------------------------

### Configuration Objects

Source: https://www.simple-table.com/docs/api-reference

Details configuration objects used for sorting, filtering, and column visibility within the Simple Table.

```APIDOC
## Configuration Objects

### Description
This section outlines the structure of key configuration objects used to manage the state and behavior of the Simple Table, including sorting, filtering, and column visibility.

### `SortConfig`

#### Description
Defines the configuration for sorting a table column.

#### Properties
- **`key`** (`HeaderObject`) - Required - The `HeaderObject` representing the column being sorted.
- **`direction`** (`"asc" | "desc"`) - Required - The sort direction for the column.

### `TableFilterState`

#### Description
Represents the current state of filtering applied to the table.

#### Properties
- **`filterCondition`** (`FilterCondition`) - Required - The `FilterCondition` object containing the filter logic.

### `ColumnVisibilityState`

#### Description
Manages the visibility state of columns in the table.

#### Properties
- **`[accessor: string]`** (`boolean`) - Required - Maps column accessor to visibility state. Each key is a column accessor, and the value is a boolean indicating whether the column is visible (true) or hidden (false).

```

--------------------------------

### Get and Set Pagination

Source: https://www.simple-table.com/docs/programmatic-control

Methods to retrieve the current page number and programmatically navigate to a specific page in the table. These methods support both client-side and server-side pagination.

```typescript
/**
 * Returns the current page number when pagination is enabled.
 * Page numbers are 1-indexed (first page is 1, not 0).
 * Returns the current page regardless of whether pagination is client-side or server-side.
 * Useful for tracking user navigation, syncing with URL parameters, or building custom pagination UI.
 */
getCurrentPage(): number;

/**
 * Programmatically navigates to a specific page when pagination is enabled.
 * Accepts a 1-indexed page number (first page is 1).
 * This method is async and returns a Promise.
 * Works with both client-side and server-side pagination.
 * If the page number is out of range, it will be clamped to valid bounds.
 * Triggers the onPageChange callback when the page changes.
 * Perfect for implementing custom pagination controls, deep linking, or restoring saved pagination state.
 */
setPage(page: number): Promise<void>;
```

--------------------------------

### Custom Header Renderer Configuration

Source: https://www.simple-table.com/docs/header-renderer

Demonstrates how to configure a custom header renderer for a table column. This allows for complete control over the appearance and behavior of column headers, including the positioning of labels, sort icons, and filter icons.

```javascript
{
  accessor: "name",
  label: "Name",
  sortable: true,
  filterable: true,
  headerRenderer: ({ components }) => (
    <>
      {components?.labelContent}
      {components?.sortIcon}
      {components?.filterIcon}
    </>
  )
}
```

--------------------------------

### Get Grouping Depth by Property (JavaScript)

Source: https://www.simple-table.com/docs/programmatic-control

Returns the depth index (0-indexed) for a specific grouping property name (accessor). This is the inverse of getGroupingProperty. Returns -1 if the property is not found.

```javascript
const depthIndex = tableInstance.getGroupingDepth('category');
console.log(depthIndex);
```

--------------------------------

### Get Expanded Depths (JavaScript)

Source: https://www.simple-table.com/docs/programmatic-control

Returns a Set containing all currently expanded depth levels (0-indexed). This allows inspection of visible hierarchy levels, useful for saving state.

```javascript
const expandedDepths = tableInstance.getExpandedDepths();
console.log(expandedDepths); // Outputs a Set of numbers
```

--------------------------------

### Dynamic Row Loading

Source: https://www.simple-table.com/docs/row-grouping

Implement dynamic loading of nested data on-demand using the `onRowGroupExpand` callback for large datasets, improving performance.

```APIDOC
## Dynamic Row Loading

### Description
For large datasets, use the `onRowGroupExpand` callback to load nested data on-demand. This example demonstrates a three-level hierarchy (Regions → Stores → Products) where child rows are fetched from an API only when their parent is expanded. The callback provides powerful helper functions like `setLoading`, `setError`, and `setEmpty` for state management, plus `rowIndexPath` (v2.2.9+: contains only numeric indices) and `rowIdPath` (when getRowId is provided) for easy nested data updates.
```

--------------------------------

### Server-Side Pagination

Source: https://www.simple-table.com/docs/pagination

Implement server-side pagination for large datasets by fetching data page by page from the server. Use `serverSidePagination`, `totalRowCount`, and `onPageChange` props.

```APIDOC
## Server-Side Pagination

For large datasets, you can implement server-side pagination where data is fetched from the server one page at a time. This improves performance by only loading the data needed for the current page.

To enable server-side pagination, use these props:

* `serverSidePagination={true}` - Disables internal pagination slicing
* `totalRowCount={number}` - Total rows available on the server
* `onPageChange=(page) => {...}` - Callback to fetch data for the new page

#### Pro Tip
When using server-side pagination, make sure to update your `rows` prop with the new page data inside your `onPageChange` callback. The table will display whatever data you provide in the `rows` prop.

#### 💡 Loading States with Pagination
Combine pagination with the `isLoading` prop to show skeleton loaders while fetching new page data. This provides better user feedback during page transitions. See the Loading State documentation for more details.
```

--------------------------------

### Clear All Table Filters

Source: https://www.simple-table.com/docs/api-reference

Clears all active filters from the table at once. This method is async and returns a Promise. Resets the table to show all data without any filtering applied. Perfect for 'reset all filters' buttons or starting fresh with filter state.

```typescript
clearAllFilters() => Promise<void>
```

--------------------------------

### Combine CSS Theming and Custom Props for Simple Table

Source: https://www.simple-table.com/docs/custom-theme

Demonstrates how to use both CSS theming and the customTheme prop in React TSX to control the appearance and layout dimensions of the Simple Table. Imports necessary components and styles from 'simple-table-core' and custom CSS files.

```tsx
import { SimpleTable } from 'simple-table-core';
import 'simple-table-core/styles.css';
import './my-custom-theme.css'; // Your CSS variables

export default function MyTable() {
  return (
    <SimpleTable
      defaultHeaders={headers}
      rows={data}
      // CSS theming for colors and visual styling
      theme="custom"
      // Layout dimensions for virtualization
      customTheme={{
        rowHeight: 48,
        headerHeight: 56,
        nestedGridMaxHeight: 400,
      }}
    />
  );
}
```

--------------------------------

### Import Simple Table CSS Styles

Source: https://www.simple-table.com/docs/quick-start

This code snippet shows the essential step of importing the core CSS styles for the Simple Table component. This import ensures that all default styling, such as borders, row highlighting, and hover effects, are applied correctly.

```javascript
import "simple-table-core/styles.css";
```

--------------------------------

### Get and Apply Sort State

Source: https://www.simple-table.com/docs/programmatic-control

Methods to retrieve the current sort configuration and programmatically apply sorting to table columns. Useful for persisting table state and implementing custom sort UIs.

```typescript
/**
 * Returns the current sort state of the table.
 * Returns null if no sorting is applied, or a SortColumn object containing the sorted column and direction.
 * Useful for persisting table state, synchronizing with external state management, or implementing custom sort UI.
 */
getSortState(): SortColumn | null;

/**
 * Programmatically applies a sort state to the table.
 * Pass a column accessor and optional direction to sort, or undefined to clear sorting.
 * If direction is omitted, the sort cycles through: asc -> desc -> removed.
 * This method is async and returns a Promise.
 * Perfect for implementing custom sort controls or coordinating sorting with external data sources.
 */
applySortState(props?: { accessor: Accessor; direction?: SortDirection }): Promise<void>;
```

--------------------------------

### Get Grouping Property by Depth (JavaScript)

Source: https://www.simple-table.com/docs/programmatic-control

Returns the grouping property name (accessor) for a specific depth index (0-indexed). Maps depth levels to their property names. Returns undefined if the depth doesn't exist.

```javascript
const propertyName = tableInstance.getGroupingProperty(1);
console.log(propertyName);
```

--------------------------------

### Responsive Auto-Expand Columns Implementation

Source: https://www.simple-table.com/docs/column-width

Demonstrates how to conditionally enable the `autoExpandColumns` prop based on screen size to ensure optimal table display across devices. It uses React's `useState` and `useEffect` hooks to track window width and adjust the `autoExpandColumns` setting accordingly. This prevents cramped columns on mobile devices by disabling auto-expansion.

```javascript
const [isMobile, setIsMobile] = useState(false);

useEffect(() => {
  const checkMobile = () => {
    setIsMobile(window.innerWidth < 768);
  };
  checkMobile();
  window.addEventListener("resize", checkMobile);
  return () => window.removeEventListener("resize", checkMobile);
}, []);

<SimpleTable
  autoExpandColumns={!isMobile}
  defaultHeaders={headers}
  rows={data}
  
/>
```

--------------------------------

### Get Table Sort State

Source: https://www.simple-table.com/docs/api-reference

Returns the current sort state of the table. Returns null if no sorting is applied, or a SortColumn object containing the sorted column and direction. Useful for persisting table state, synchronizing with external state management, or implementing custom sort UI.

```typescript
getSortState() => SortColumn | null
```

--------------------------------

### Get, Apply, and Clear Filters

Source: https://www.simple-table.com/docs/programmatic-control

Methods for managing table filters, including retrieving the current filter state, applying specific filters, clearing individual column filters, and clearing all filters. Supports various filter operators.

```typescript
/**
 * Returns the current filter state of the table as a TableFilterState object.
 * The object contains all active filters keyed by unique filter IDs. Each filter includes the column accessor, operator, and values.
 * Useful for debugging, persisting filter state, or building custom filter UI.
 */
getFilterState(): TableFilterState;

/**
 * Programmatically applies a filter to a specific column.
 * Accepts a FilterCondition object specifying the column accessor, filter operator, and value(s).
 * This method is async and returns a Promise.
 * Supports all filter operators including equals, contains, greaterThan, between, and more.
 * Perfect for implementing custom filter UI, applying saved filters, or creating filter presets.
 */
applyFilter(filter: FilterCondition): Promise<void>;

/**
 * Clears the filter for a specific column identified by its accessor.
 * This method is async and returns a Promise.
 * Only removes filters applied to the specified column, leaving other column filters intact.
 * Useful for implementing 'clear filter' buttons on individual columns or resetting specific filters programmatically.
 */
clearFilter(accessor: Accessor): Promise<void>;

/**
 * Clears all active filters from the table at once.
 * This method is async and returns a Promise.
 * Resets the table to show all data without any filtering applied.
 * Perfect for 'reset all filters' buttons or starting fresh with filter state.
 */
clearAllFilters(): Promise<void>;
```

--------------------------------

### Basic Theme and Styling Configuration in React TSX

Source: https://www.simple-table.com/docs/themes

This snippet demonstrates how to apply built-in themes and styling flags to the Simple Table component in a React TSX application. It shows the import of the component and its CSS, and how to pass theme and styling props like `theme`, `useHoverRowBackground`, `useOddEvenRowBackground`, `useOddColumnBackground`, and `columnBorders`.

```jsx
import { SimpleTable } from 'simple-table-core';
import 'simple-table-core/styles.css';

export default function MyTable() {
  return (
    <SimpleTable
      defaultHeaders={headers}
      rows={data}
      theme="dark"
      useHoverRowBackground={true}
      useOddEvenRowBackground={true}
      useOddColumnBackground={false}
      columnBorders={true}
    />
  );
}
```

--------------------------------

### Simple Table Component Properties

Source: https://www.simple-table.com/docs/api-reference

Configuration options for the Simple Table component, including event handlers, pagination, selection, theming, and column management.

```APIDOC
## Simple Table Component Properties

### Description
This section details the various properties and callback functions that can be used to configure and interact with the Simple Table component.

### Properties

#### Row Group Expansion

- **onRowGroupExpand** (props: OnRowGroupExpandProps) => void | Optional | Callback function triggered when a grouped row is expanded or collapsed. Provides detailed information about the row, depth level, and grouping context, plus helper functions for managing loading, error, and empty states. The rowIndexPath array provides a direct path to update nested data. Perfect for implementing lazy-loading of hierarchical data with built-in state management.
- **loadingStateRenderer** (string | ReactNode) | Optional | Custom content to display when a row is in loading state (set via setLoading in onRowGroupExpand). Can be a simple string or React component. Shown in place of row children while data is being fetched. If not provided, a default skeleton loading animation will be displayed automatically.
- **errorStateRenderer** (string | ReactNode) | Optional | Custom content to display when a row has an error state (set via setError in onRowGroupExpand). Can be a simple string or React component. Shown in place of row children when data fetching fails.
- **emptyStateRenderer** (string | ReactNode) | Optional | Custom content to display when a row has no children data (set via setEmpty in onRowGroupExpand). Can be a simple string or React component. Shown when data fetch succeeds but returns zero results.
- **canExpandRowGroup** (row: Row) => boolean | Optional | Callback function to conditionally control whether a specific row group can be expanded. Return true to allow expansion, false to disable it. Useful for implementing permission-based access, hiding empty groups, or preventing expansion based on business logic.

#### Pagination

- **rowsPerPage** (number) | Optional | Number of rows per page for pagination.
- **onPageChange** (page: number) => void | Promise<void> | Optional | Callback function triggered when page changes. Useful for server-side pagination to fetch data for the new page.
- **serverSidePagination** (boolean) | Optional | Flag to disable internal pagination slicing. When true, the table expects you to provide pre-paginated data via the rows prop and handle pagination externally.
- **totalRowCount** (number) | Optional | Total number of rows available on the server (for server-side pagination). Used to calculate total pages and display correct pagination information.
- **shouldPaginate** (boolean) | Optional | Flag for enabling pagination.

#### Cell and Row Selection

- **selectableCells** (boolean) | Optional | Enable cell selection functionality.
- **copyHeadersToClipboard** (boolean) | Optional | When true, includes column headers as the first row when copying selected cells to clipboard. Defaults to false.
- **enableRowSelection** (boolean) | Optional | Enable row selection functionality with checkboxes.
- **onRowSelectionChange** (props: RowSelectionChangeProps) => void | Optional | Callback function triggered when row selection changes.
- **onCellClick** (props: CellClickProps) => void | Optional | Callback function triggered when a cell is clicked. Provides detailed information about the clicked cell including its position, value, and containing row.
- **onCellEdit** (props: CellChangeProps) => void | Optional | Callback function triggered when a cell is edited. Provides the edited cell information including the new value, row, and column accessor.

#### Column Management

- **selectableColumns** (boolean) | Optional | Flag for selectable column headers.
- **onColumnSelect** (header: HeaderObject) => void | Optional | Callback when a column is selected/clicked. Provides the complete HeaderObject of the selected column.
- **enableHeaderEditing** (boolean) | Optional | Flag for enabling header label editing when clicking already active headers.
- **onHeaderEdit** (header: HeaderObject, newLabel: string) => void | Optional | Callback when a header is edited. Receives the HeaderObject and the new label value.
- **onColumnOrderChange** (newHeaders: HeaderObject[]) => void | Optional | Callback when column order changes (through drag and drop reordering). Receives the new headers array in the updated order.
- **onColumnVisibilityChange** (visibilityState: ColumnVisibilityState) => void | Optional | Callback triggered when column visibility changes (when users show/hide columns through the column editor). Receives a ColumnVisibilityState object mapping each column accessor to its visibility state (true = visible, false = hidden). Perfect for persisting user preferences or syncing visibility state with external storage.

#### Theming and Styling

- **isLoading** (boolean) | Optional | When set to true, all table cells will render skeleton loaders instead of actual data. Provides visual feedback while data is being fetched from the server.
- **theme** (Theme) | Optional | Theme configuration for the table styling.
- **useOddColumnBackground** (boolean) | Optional | Flag for using alternating column background colors.
- **useHoverRowBackground** (boolean) | Optional | Flag for using hover row background highlighting.
- **useOddEvenRowBackground** (boolean) | Optional | Flag for using odd/even row background colors.

```

--------------------------------

### Custom Icons API

Source: https://www.simple-table.com/docs/custom-icons

Simple Table allows customization of various icons through the `icons` prop. This includes icons for sorting, filtering, pagination, row expansion, and drag-and-drop operations. All icon props have been consolidated into a single `icons` object for better organization.

```APIDOC
## Custom Icons

Simple Table allows you to override the default icons used for sorting, pagination, row expansion, filtering, and drag-and-drop operations. Use the unified `icons` prop to customize all icons in one place, maintaining consistent branding across your application.

### New in v2.4.1
All icon props have been consolidated into a single `icons` object for better organization. The new `drag` icon is used for the drag handle in the column editor.

### Available Icon Props

| Property           | Required | Description                                                                                                | Example
```

--------------------------------

### Automatic Formatted Value for CSV Export in React TSX

Source: https://www.simple-table.com/docs/value-formatter

When a `valueFormatter` is present, this option automatically includes the formatted value in CSV exports. This ensures consistency between what the user sees and what is exported. This behavior defaults to `true` starting from v1.8.6.

```tsx
{
  accessor: "margin",
  valueFormatter: ({ value }) => `${(value * 100).toFixed(1)}%`
  // useFormattedValueForCSV: true (automatically defaults to true)
}
```

--------------------------------

### Set Table Pagination Page

Source: https://www.simple-table.com/docs/api-reference

Programmatically navigates to a specific page when pagination is enabled. Accepts a 1-indexed page number (first page is 1). This method is async and returns a Promise. Works with both client-side and server-side pagination. If the page number is out of range, it will be clamped to valid bounds. Triggers the onPageChange callback when the page changes. Perfect for implementing custom pagination controls, deep linking, or restoring saved pagination state.

```typescript
setPage(page: number) => Promise<void>
```

--------------------------------

### Get Table Header Definitions

Source: https://www.simple-table.com/docs/programmatic-control

The `getHeaders` method returns an array of `HeaderObject`s, representing the current configuration of all columns in the table. This includes accessors, labels, types, and formatting options, making it useful for dynamic UI generation or custom export configurations.

```javascript
const headers = tableRef.getHeaders();
```

--------------------------------

### Get Table Filter State

Source: https://www.simple-table.com/docs/api-reference

Returns the current filter state of the table as a TableFilterState object. The object contains all active filters keyed by unique filter IDs. Each filter includes the column accessor, operator, and values. Useful for debugging, persisting filter state, or building custom filter UI.

```typescript
getFilterState() => TableFilterState
```

--------------------------------

### Row Grouping Configuration

Source: https://www.simple-table.com/docs/row-grouping

Configure how rows are grouped and displayed hierarchically. This includes options for expandable columns, defining hierarchy levels, default expansion state, and callbacks for expansion events.

```APIDOC
## Row Grouping Configuration

### Description
Configure how rows are grouped and displayed hierarchically. This includes options for expandable columns, defining hierarchy levels, default expansion state, and callbacks for expansion events.

### Parameters

#### Request Body

- **HeaderObject.expandable** (boolean) - Optional - Makes a column expandable for grouping. This allows users to expand/collapse hierarchical data in that column.
- **rowGrouping** (string[]) - Optional - Array of property names that define the hierarchy levels. The order determines the nesting depth (first element is level 1, second is level 2, etc.).
- **expandAll** (boolean) - Optional - When true, all grouped rows are expanded by default on table load. When false, rows start collapsed.
- **onRowGroupExpand** ((props: OnRowGroupExpandProps) => void) - Optional - Callback function triggered when a grouped row is expanded or collapsed. Receives detailed information including helper functions for managing loading, error, and empty states. The rowIndexPath array (v2.2.9+: contains ONLY numeric indices) provides a direct path to update nested data. The optional rowIdPath (when getRowId is provided) offers stable ID-based navigation. Perfect for lazy-loading hierarchical data on demand.
- **loadingStateRenderer** (string | ReactNode) - Optional - Custom content to render when a row is in loading state (set via setLoading helper in onRowGroupExpand). Can be a string or React component. If not provided, a default skeleton loading state will be shown automatically.
- **errorStateRenderer** (string | ReactNode) - Optional - Custom content to render when a row has an error state (set via setError helper in onRowGroupExpand). Can be a string or React component.
- **emptyStateRenderer** (string | ReactNode) - Optional - Custom content to render when a row has no children data (set via setEmpty helper in onRowGroupExpand). Can be a string or React component.
- **canExpandRowGroup** ((row: Row) => boolean) - Optional - Function to conditionally control whether a specific row group can be expanded. Return true to allow expansion, false to disable it. Useful for permission-based access, hiding empty groups, or business logic-based restrictions.
- **enableStickyParents** (boolean) - Optional - Beta feature: When enabled, parent rows with children will remain sticky at the top while scrolling down through their child rows. This helps maintain context when navigating deep hierarchical data. Defaults to false as this is still a beta feature.
```

--------------------------------

### Get Currently Visible Rows

Source: https://www.simple-table.com/docs/programmatic-control

The `getVisibleRows` method returns an array of `TableRow` objects representing the rows currently displayed in the table. This respects pagination and active filters, providing a snapshot of the user's current view. It's ideal for operations on the visible dataset.

```javascript
const visibleRows = tableRef.getVisibleRows();
```

--------------------------------

### Basic Pagination

Source: https://www.simple-table.com/docs/pagination

Enable basic pagination by adding the `shouldPaginate` prop to your SimpleTable component. This automatically handles pagination controls and data division.

```APIDOC
## Basic Pagination

To enable pagination in Simple Table, you need to add the `shouldPaginate` prop to your SimpleTable component. This will automatically handle pagination of your data.

### Pagination Configuration

| Property | Required | Description | Example |
|---|---|---|---|
| `shouldPaginate` | Optional | Enables pagination functionality for the table. When true, the table will display pagination controls and divide data into pages. | |
| `rowsPerPage` | Optional | Number of rows to display per page. Default is 10. | |
| `onPageChange` | Optional | Callback function triggered when page changes, either through user interaction (clicking pagination buttons) or programmatically via tableRef.setPage(). Useful for server-side pagination to fetch data for the new page. | (page: number) => void |
| `serverSidePagination` | Optional | Flag to disable internal pagination slicing. When true, the table expects you to provide pre-paginated data via the rows prop. | |
| `totalRowCount` | Optional | Total number of rows available on the server (for server-side pagination). Used to calculate total pages. | |
| `onNextPage` | Optional | Callback function triggered when user clicks the next page button. | () => void |
| `isLoading` | Optional | Display skeleton loaders while fetching page data. Particularly useful with server-side pagination to show loading state during page transitions. | |

### Pagination Features

When pagination is enabled, Simple Table provides:

* Automatic page navigation controls
* Page size selection
* Current page indicator
* Total pages display
* Smart page number display with first page button - when navigating to far pages, the footer shows the first page with ellipsis (e.g., "1 ... 78 79 80") for quick access to the beginning
```
Tokens:
Raw