DataTable — flood.md

Preview

Projects
Select rows on this page
Select Design system	Design system	Active	12
Select Website	Website	Active	4
Select Agent guides	Agent guides	Draft	2
Select Mobile app	Mobile app	Draft	8
Select Research	Research	Archived	3

DensityPageSize

Selectable

Striped

State

Use DataTable

DataTable is a named export of @flood-md/react. Connect the package once, then import what you use.

First time here? Connect Flood

PackageProject UI

"use client";

import { FloodRoot, DataTable } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <DataTable caption="Projects" selectable pageSize={5}
        columns={[{id:"name",label:"Project",sortable:true},{id:"status",label:"Status"}]}
        rows={[{id:"design",label:"Design system",cells:{name:"Design system",status:"Active"}}]} />
    </FloodRoot>
  );
}

Design notes

Supply the complete client collection; remote/server pagination and virtualization are not part of this API.
Select all affects selectable rows on the current page and preserves selection on other pages.
Use sortValues for rich React cells; missing values sort last in both directions.

API reference

Prop	Values	Default
`caption`	string	Required
`hideCaption`	boolean	—
`columns`	readonly DataTableColumn[]	Required
`rows`	readonly DataTableRow[]	Required
`density`	"compact" \| "comfortable"	—
`striped`	boolean	—
`minWidth`	CSSProperties["minWidth"]	—
`sort`	DataTableSort \| null	—
`defaultSort`	DataTableSort \| null	—
`onSortChange`	(sort: DataTableSort \| null) => void	—
`locale`	string	—
`selectable`	boolean	—
`selectedIds`	readonly string[]	—
`defaultSelectedIds`	readonly string[]	—
`onSelectionChange`	(ids: string[]) => void	—
`page`	number	—
`defaultPage`	number	—
`pageSize`	number	—
`onPageChange`	(page: number) => void	—
`state`	"ready" \| "loading" \| "error"	—
`onRetry`	() => void	—
`labels`	DataTableLabels	—
`Native HTML props`	Omit<HTMLAttributes<HTMLDivElement>, "children">	Forwarded

View TypeScript source