DataTable

@spartanfx/react v1.0.4

---

@spartanfx/react / DataTable

Function: DataTable()

DataTable<T>(props): Element

Renders a powerful, configurable data table with support for:

• Fluent UI DetailsList and responsive tile view
• Column filtering, sorting, and search
• Export to Excel
• Infinite scrolling
• Custom field renderers
• Dark mode theming with customizable tokens

This component is highly extensible and can be themed, localized, and dynamically updated through callbacks. Unlike ListView, DataTable uses props-based data instead of SPFx dependencies.

Type Parameters

T

T = any

Parameters

props

PropsWithChildren<IDataTableProps<T>>

Returns

Element

Examples

<DataTable
  items={items}
  columns={columns}
  onLoadMore={() => loadMoreItems()}
/>

<DataTable
  items={items}
  columns={columns}
  selectionMode={SelectionMode.multiple}
  onSelectionChanged={(selectedItems: any[]) => console.log(selectedItems)}
/>

import { DataTable, AppearanceMode } from '@spartanfx/components';

<DataTable
  items={items}
  columns={columns}
  appearance={AppearanceMode.dark}
/>

<DataTable
  items={items}
  columns={columns}
  appearance={AppearanceMode.dark}
  themeTokens={{
    colorPrimary: '#10b981',
    colorBackground: '#111827',
    colorBorder: '#1f2937',
    colorText: '#f9fafb',
    colorHover: '#1f2937'
  }}
/>