Data Table ProReact

Fourteen working implementations

Learn the grid by using it.

Start with a typed local table, progress into spreadsheet workflows, or inspect the full million-row host. Every route below renders the real Data Table Pro component and pairs it with tracked source.

Read the docsBrowse the API
Spreadsheet canvasBlank sheetA sparse, growing spreadsheet canvas.Server showcase100M-cell demoOne million rows and one hundred virtual columns.
  1. 01StarterBasic tableA complete local-data starting point.Local dataTyped columnsEditing
  2. 02TableCustom cellsRich content that stays virtualized.RenderingGroupsPinning
  3. 03TableSelection & paginationControlled pages and selected row values.SelectionPaginationControlled
  4. 04SpreadsheetEditing & validationInline editors with Zod-backed rules.EditingValidationHistory
  5. 05StarterControlled onChangeSee controlled row updates as formatted JSON.ControlledonChangeJSON
  6. 06TableColumn controlsResize, reorder, pin, hide, and freeze columns.ResizeReorderPinningSettings
  7. 07SpreadsheetImport & exportFocused CSV and XLSX transfer.CSVXLSXFiles
  8. 08SpreadsheetData operationsImport, export, insert, and delete rows.CSVXLSXRow actions
  9. 09SpreadsheetRow add & deleteSingle-row actions and selection-driven bulk delete.Row actionsBulk deleteHistory
  10. 10SpreadsheetTable ↔ spreadsheetSwitch modes on the same dataset.ModeTableSpreadsheet
  11. 11SpreadsheetCustom stylingSpreadsheet behavior with expressive styling.SpreadsheetStylingSearch
  12. 12SpreadsheetCustom controlsExternal controls with table state.ControlledFormattingPagination
  13. 13ServerRemote windowed dataClient-fetched sparse windows over a large remote set.RemoteVirtualization50k rows
  14. 14SpreadsheetBlank sheetA sparse, growing spreadsheet canvas.EditableUndo / redoCSV / XLSX
  15. 15Server100M-cell demoOne million rows and one hundred virtual columns.100M cells1M × 100Server windows

Prop coverage

Find an API in context.

Each prop links to its API definition and to an example that exercises it.

dataSource05 Controlled onChange →columnSettings01 Basic table →maxHeight01 Basic table →cell02 Custom cells →groupTitle02 Custom cells →align02 Custom cells →pinned06 Column controls →pagination03 Selection & pagination →onPaginationChange03 Selection & pagination →enableRowSelection09 Row add & delete →enableEditing05 Controlled onChange →onChange05 Controlled onChange →undoLimit04 Editing & validation →redoLimit04 Editing & validation →enableColumnResizing06 Column controls →enableColumnReorder06 Column controls →enableColumnPinning06 Column controls →enableColumnSettings06 Column controls →onColumnSettingsChange06 Column controls →enableUpload08 Data operations →enableDownload08 Data operations →defaultFileName07 Import & export →enableRowActions09 Row add & delete →createEmptyRow14 Blank sheet →mode14 Blank sheet →rowStyle11 Custom styling →cellStyle11 Custom styling →showGlobalSearch11 Custom styling →conditionalFormatting12 Custom controls →enableFindReplace12 Custom controls →enableGoToCell12 Custom controls →columnLayoutSettings12 Custom controls →rowCount15 100M-cell demo →getRow15 100M-cell demo →onVisibleRangeChange13 Remote windowed data →dataVersion13 Remote windowed data →onVisibleColumnRangeChange14 Blank sheet →getRowsForExport15 100M-cell demo →