IDataTableProps

@spartanfx/react v1.0.4

---

@spartanfx/react / IDataTableProps

Interface: IDataTableProps<T>

Props for the DataTable component - a generic data table without SPFx dependencies.

Supports both traditional DetailsList and responsive TileView, as well as filtering, sorting, searching, and context menus.

Type Parameters

T

T = any

The type of items in the DataTable (for type-safe fieldName)

Properties

Property	Type	Description
appearance?	AppearanceMode	Appearance mode for theming (light or dark) Default AppearanceMode.light
availableColumns?	IColumn[]	All available columns for column selector (if different from visible columns) Work alongside with viewKey to store the column configuration
columns	(IColumn | IDataTableColumn<T>)[]	Array of columns to be rendered in the view. Can be either simplified IDataTableColumn or full IColumn definitions, or a mix of both.
currentFilters?	object	Current active filters
detailsListProps?	Partial<IDetailsListProps>	Optional overrides for Fluent UI's DetailsList props.
disableFiltering?	boolean	Disables column-based filtering entirely.
disableLoadingAnimation?	boolean	Disable inner loading animation
disableSorting?	boolean	Disables column-based sorting entirely.
enableCellContextMenu?	boolean	Enable cell context menu (right-click on cells)
enableColumnSelector?	boolean	Enable the column selector feature allowing users to customize visible columns
error?	Error	Current error state
exportAttributeOverride?	object	Optional attribute override for export (e.g., Requestor: 'title')
exportButtonProps?	object	Export button props customization
exportButtonProps.iconName?	string	-
exportButtonProps.text?	string	-
fieldInfo?	IDataTableFieldType[]	Optional field metadata (for field renderers and tooltips)
forceReload?	() => void | Promise<void>	Force reload of items and total count (useful after external CUD operations)
forceTileView?	boolean	Forces tile view layout regardless of screen width.
gridProps?	Partial<IGridProps>	Optional Grid props for customizing tile layout in tile view Passed through to the Grid component used by TileList
hasMore?	boolean	Whether more items are available to load
headerText?	string	Optional title or header text to show at the top of the list.
hideExport?	boolean	Hides the Export to Excel button.
hideSearch?	boolean	Hides the search box in the header.
hideSortAndFilterButton?	boolean	Hides the sort and filter button in tile view.
highlightedFieldName?	string	Field to visually highlight in the tile view.
items	T[]	Array of items to display in the table
listName?	string	Optional list name for Excel export sheet naming
loading?	boolean	Current loading state
loadingCount?	boolean	Loading state specifically for counting total items
onDismissTileViewFilterSortPanel?	() => void	Callback fired when the tile view filter/sort pane is dismissed.
onExport?	() => any[] | Promise<any[]>	Callback when export to Excel is requested Returns all items matching current filters/search for export
onFilter?	(fieldName, selectedValues) => void | Promise<void>	Callback when filter is applied
onGetFilterOptions?	(fieldName, currentFilters) => Promise<IFilterCriteria[]>	Callback to get available filter options for a field (replacing context-based filter API)
onItemClick?	(item) => void	Optional handler fired when a list item is clicked.
onLoadingStateChanged?	(loading) => void	Callback triggered when the loading state changes
onLoadMore?	(pageRef?) => void | Promise<void>	Callback to load more items (pagination)
onRefresh?	() => void	Callback for refresh button
onRenderDataTableControls?	() => Element	Allows injecting custom UI controls above the list (e.g., command bar, filters).
onRenderItemCount?	(itemCount) => Element	Optional onRenderItemCount. Use this to pass a custom renderer for the item count.
onRenderItemCountNumber?	(itemCount) => Element	Optional onRenderItemCountNumber. Use this to pass a custom renderer to render the item count number.
onRenderSortAndFilterButton?	(hasFilters, onClick) => Element	Allows customization of the Sort/Filter button in tile view.
onRenderTile?	(item, columns) => any	Optional custom tile renderer for use with tile view mode.
onSearch?	(searchText) => void | Promise<void>	Callback when search text changes
onSelectedColumnsChange?	(columns) => void	Callback when selected columns are changed (for persistence)
onSelectionChanged?	(selectedItems) => any	Optional onSelectionChanged. Ignored if SelectionMode is set to none
onSort?	(fieldName, descending) => void | Promise<void>	Callback when sort is requested
searchBoxProps?	Partial<IExtendedSearchBoxProps>	Optional ExtendedSearchBox props.
searchPlaceholder?	string	Placeholder text for search box
searchText?	string	Current search text (controlled)
selectedColumns?	IColumn[]	Selected columns (controlled mode). When provided, the component won't use internal localStorage. Use with onSelectedColumnsChange to manage column selection externally.
selectionMode?	SelectionMode	Optional selection mode. Default value 'none'
showItemCount?	boolean	Optional showItemCount. Show the number of total items.
themeTokens?	object	Optional theme tokens to customize DataTable appearance. CSS custom properties that override default theme values.
themeTokens.borderRadius?	string	Border radius
themeTokens.colorBackground?	string	Background color for main container
themeTokens.colorBorder?	string	Border color
themeTokens.colorHover?	string	Hover state background
themeTokens.colorPrimary?	string	Primary accent color
themeTokens.colorSelected?	string	Selected state background
themeTokens.colorText?	string	Primary text color
themeTokens.colorTextSecondary?	string	Secondary text color
themeTokens.shadow?	string	Box shadow
themeTokens.spacing?	string	Spacing unit
themeTokens.transition?	string	Transition duration
tileListProps?	Partial<ITileListProps>	Optional TileList props
tileViewFilterSortPanelExclusions?	string[]	Field names to exclude from filter/sort pane in tile view.
tileViewFilterSortPanelOpened?	boolean	Controls whether the tile view filter/sort pane is open by default.
tileViewThreshold?	number	Threshold below which the tile view is enabled automatically. Default 1185
totalItems?	number	Total number of items available (for pagination display)
translate?	(text) => string	Optional translation function for labels like buttons and filters.
translatedFields?	string[]	Array of field internal names that require translation of their filter values.
viewKey?	string	View key for column persistence (used in localStorage key) Mandatory to save column configuration to local storage