Skip to main content

DataTable

DataTable is SpartanFX's flagship collection component. It renders a Fluent UI DetailsList (with a responsive tile view on narrow screens) and layers on sorting, filtering, search, grouping, Excel export, infinite scroll or built-in paging, custom field renderers, and dark-mode theming.

Unlike the SharePoint-bound ListView, DataTable is props-driven — you feed it items and columns, and wire behavior through callbacks. That makes it host-agnostic: the same table works in standalone React, and gains a data source through a /spfx or /codeapps adapter when you need one.

When to use​

  • Any tabular data where users need to sort, filter, search, or export.
  • Responsive lists that should collapse to cards (tiles) on small screens.
  • As the UI half of a SharePoint or Dataverse list — pair it with an adapter hook.

Import​

import { DataTable } from '@spartanfx/react';

Minimal example​

items and columns are the only required props.

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

With selection​

import { DataTable } from '@spartanfx/react';
import { SelectionMode } from '@fluentui/react';

<DataTable
  items={items}
  columns={columns}
  selectionMode={SelectionMode.multiple}
  onSelectionChanged={(selected) => console.log(selected)}
/>

Paging vs. infinite scroll​

By default DataTable uses an IntersectionObserver to load more as the user scrolls (onLoadMore). To use classic pages instead, enable the built-in pager:

<DataTable
  items={items}
  columns={columns}
  enablePager
  itemsPerPage={25}
  onLoadMore={(page) => loadPage(page)} // receives the 1-based page number
/>

Enabling the pager implicitly disables inner infinite scroll.

Dark mode & custom tokens​

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

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

Connecting a data source (adapter)​

For SharePoint or Dataverse, drive DataTable from an adapter hook rather than managing state by hand:

// SharePoint (SPFx)
import { DataTable } from '@spartanfx/react';
import { useSharePointDataTable } from '@spartanfx/react/spfx';

function ProjectsTable() {
  const table = useSharePointDataTable({ listTitle: 'Projects', pageSize: 50 });
  return <DataTable {...table} columns={columns} />;
}

See Architecture for how the /spfx and /codeapps adapters map to targets.

Props at a glance​

The reference groups DataTable's ~60 props into Required, Options, Events & callbacks, and Appearance & theming. The most common:

PropTypeNotes
items (required)T[]Rows to display.
columns (required)(IDataTableColumn | IColumn)[]Simplified or full Fluent columns (or a mix).
selectionModeSelectionModenone (default), single, multiple.
enablePager / itemsPerPageboolean / numberClient-side paging (default page size 10).
groupByLevel1..3keyof TUp to three grouping levels (DetailsList view).
onLoadMore / onSort / onFilter / onSearchcallbacksServer- or client-driven data ops.
appearance / themeTokensAppearanceMode / tokensDark mode and color overrides.

See the full generated reference: DataTable API ↗.

See also​