Data Displayduskmoonimplemented7 demos

Table

Table renders structured data with columns, sorting, filters, selection, and pagination.

Import@duskmoon-dev/components/table

23API sections

93documented props

5behavior scenarios

Key API

columnsdataSourcerowKeyloadingborderedsize

Usage

When to use

Use it when users need to scan structured content and act on individual records.
Prefer it over ad hoc markup when the content has repeatable fields, hierarchy, or navigation state.

Implementation notes

StylesheetImport @duskmoon-dev/components/styles.css once in the app or docs shell.

StateStart with default props for static examples, then switch to controlled props when state must be shared.

ThemeThe preview inherits the active DuskMoon data-theme value from the docs layout.

Features

Structured records

Designed for repeated or hierarchical content where users scan, compare, and inspect details.

Stateful interactions

Documents the props that control sorting, selection, expansion, pagination, or value changes where available.

Primary API surface

Table is most often configured through `columns`, `dataSource`, `rowKey`, `loading`.

Covered behavior

Renders columns, dataSource, nested dataIndex, loading, and empty text

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Preview

Name	Status	Owner
Design tokens	Ready	Luna
Components	Review	Kai

Basic usage

authored

Import the component stylesheet and Table from its package subpath, then render it with the core props.

Source

import "@duskmoon-dev/components/styles.css";
import { Table } from "@duskmoon-dev/components/table";

export function Example() {
  return (<Table
  columns={[
    { title: "Name", dataIndex: "name", key: "name" },
    { title: "Status", dataIndex: "status", key: "status" },
    { title: "Owner", dataIndex: "owner", key: "owner" }
  ]}
  dataSource={[
    { key: 1, name: "Design tokens", status: "Ready", owner: "Luna" },
    { key: 2, name: "Components", status: "Review", owner: "Kai" }
  ]}
  pagination={false}
  bordered
/>);
}

Preview

Name	Status	Owner
Design tokens	Ready	Luna
Components	Review	Kai

Renders columns, dataSource, nested dataIndex, loading, and empty text

test-backed

Table scenario from the component test coverage: renders columns, datasource, nested dataindex, loading, and empty text.

Source

import "@duskmoon-dev/components/styles.css";
import { Table } from "@duskmoon-dev/components/table";

export function TableRendersColumnsDataSourceNestedDemo() {
  return (<Table
  columns={[
    { title: "Name", dataIndex: "name", key: "name" },
    { title: "Status", dataIndex: "status", key: "status" },
    { title: "Owner", dataIndex: "owner", key: "owner" }
  ]}
  dataSource={[
    { key: 1, name: "Design tokens", status: "Ready", owner: "Luna" },
    { key: 2, name: "Components", status: "Review", owner: "Kai" }
  ]}
  pagination={false}
  bordered
/>);
}

Preview

Name	Status	Owner
Design tokens	Ready	Luna
Components	Review	Kai

Sorts data and emits onChange sorter information

test-backed

Table scenario from the component test coverage: sorts data and emits onchange sorter information.

Source

import "@duskmoon-dev/components/styles.css";
import { Table } from "@duskmoon-dev/components/table";

export function TableSortsDataAndEmitsDemo() {
  return (<Table
  columns={[
    { title: "Name", dataIndex: "name", key: "name" },
    { title: "Status", dataIndex: "status", key: "status" },
    { title: "Owner", dataIndex: "owner", key: "owner" }
  ]}
  dataSource={[
    { key: 1, name: "Design tokens", status: "Ready", owner: "Luna" },
    { key: 2, name: "Components", status: "Review", owner: "Kai" }
  ]}
  pagination={false}
  bordered
/>);
}

Preview

Name	Status	Owner
Design tokens	Ready	Luna
Components	Review	Kai

Filters rows and emits filter changes

test-backed

Table scenario from the component test coverage: filters rows and emits filter changes.

Source

import "@duskmoon-dev/components/styles.css";
import { Table } from "@duskmoon-dev/components/table";

export function TableFiltersRowsAndEmitsDemo() {
  return (<Table
  columns={[
    { title: "Name", dataIndex: "name", key: "name" },
    { title: "Status", dataIndex: "status", key: "status" },
    { title: "Owner", dataIndex: "owner", key: "owner" }
  ]}
  dataSource={[
    { key: 1, name: "Design tokens", status: "Ready", owner: "Luna" },
    { key: 2, name: "Components", status: "Review", owner: "Kai" }
  ]}
  pagination={false}
  bordered
/>);
}

Preview

Name	Status	Owner
Design tokens	Ready	Luna
Components	Review	Kai

Supports row selection and expandable rows

test-backed

Table scenario from the component test coverage: supports row selection and expandable rows.

Source

import "@duskmoon-dev/components/styles.css";
import { Table } from "@duskmoon-dev/components/table";

export function TableSupportsRowSelectionAndDemo() {
  return (<Table
  columns={[
    { title: "Name", dataIndex: "name", key: "name" },
    { title: "Status", dataIndex: "status", key: "status" },
    { title: "Owner", dataIndex: "owner", key: "owner" }
  ]}
  dataSource={[
    { key: 1, name: "Design tokens", status: "Ready", owner: "Luna" },
    { key: 2, name: "Components", status: "Review", owner: "Kai" }
  ]}
  pagination={false}
  bordered
/>);
}

Preview

Name	Status	Owner
Design tokens	Ready	Luna
Components	Review	Kai

Supports pagination config, summary, Column, and ColumnGroup

test-backed

Table scenario from the component test coverage: supports pagination config, summary, column, and columngroup.

Source

import "@duskmoon-dev/components/styles.css";
import { Table } from "@duskmoon-dev/components/table";

export function TableSupportsPaginationConfigSummaryDemo() {
  return (<Table
  columns={[
    { title: "Name", dataIndex: "name", key: "name" },
    { title: "Status", dataIndex: "status", key: "status" },
    { title: "Owner", dataIndex: "owner", key: "owner" }
  ]}
  dataSource={[
    { key: 1, name: "Design tokens", status: "Ready", owner: "Luna" },
    { key: 2, name: "Components", status: "Review", owner: "Kai" }
  ]}
  pagination={false}
  bordered
/>);
}

Preview

Sunshine Theme

Name	Status	Owner
Design tokens	Ready	Luna
Components	Review	Kai

Moonlight Theme

Name	Status	Owner
Design tokens	Ready	Luna
Components	Review	Kai

Theme aware

authored

Docs previews inherit the DuskMoon data-theme value. Use the header switch to compare light and dark rendering.

Source

<div data-theme="sunshine">
  <Table
  columns={[
    { title: "Name", dataIndex: "name", key: "name" },
    { title: "Status", dataIndex: "status", key: "status" },
    { title: "Owner", dataIndex: "owner", key: "owner" }
  ]}
  dataSource={[
    { key: 1, name: "Design tokens", status: "Ready", owner: "Luna" },
    { key: 2, name: "Components", status: "Review", owner: "Kai" }
  ]}
  pagination={false}
  bordered
/>
</div>

<div data-theme="moonlight">
  <Table
  columns={[
    { title: "Name", dataIndex: "name", key: "name" },
    { title: "Status", dataIndex: "status", key: "status" },
    { title: "Owner", dataIndex: "owner", key: "owner" }
  ]}
  dataSource={[
    { key: 1, name: "Design tokens", status: "Ready", owner: "Luna" },
    { key: 2, name: "Components", status: "Review", owner: "Kai" }
  ]}
  pagination={false}
  bordered
/>
</div>

API

The API reference below lists every parsed exported type or interface for Table. Start with `columns`, `dataSource`, `rowKey`, `loading` for common usage.

Types: packages/components/src/components/table/Table.types.tsScenarios: packages/components/src/components/table/Table.test.tsx

TablePropsinterface extends <T = TableRecord> extends Omit< ComponentProps<"div">, "onChange" >

Prop	Type	Required	Description
`columns`	`TableColumnsType<T>`	No	columns configures Table.
`dataSource`	`T[]`	No	dataSource configures Table.
`rowKey`	`TableRowKey<T>`	No	rowKey configures Table.
`loading`	`boolean \| { spinning?: boolean; indicator?: ReactNode }`	No	loading configures Table.
`bordered`	`boolean`	No	bordered configures Table.
`size`	`TableSize`	No	size configures Table.
`pagination`	`false \| TablePaginationConfig`	No	pagination configures Table.
`rowSelection`	`TableRowSelection<T>`	No	rowSelection configures Table.
`expandable`	`TableExpandableConfig<T>`	No	expandable configures Table.
`summary`	`(pageData: readonly T[]) => ReactNode`	No	summary configures Table.
`locale`	`TableLocale`	No	locale configures Table.
`tableLayout`	`CSSProperties["tableLayout"]`	No	tableLayout configures Table.
`scroll`	`{ x?: number \| string \| true; y?: number \| string }`	No	scroll configures Table.
`onChange`	`(`	No	onChange configures Table.
`pagination`	`TablePaginationConfig,`	Yes	pagination configures Table.
`filters`	`Record<string, FilterValue \| null>,`	Yes	filters configures Table.
`sorter`	`SorterResult<T>,`	Yes	sorter configures Table.
`extra`	`TableCurrentDataSource<T>,`	Yes	extra configures Table.

TableColumnTypeinterface extends <T = TableRecord>

Prop	Type	Required	Description
`title`	`ReactNode`	No	title configures Table.
`dataIndex`	`DataIndex`	No	dataIndex configures Table.
`key`	`TableKey`	No	key configures Table.
`width`	`string \| number`	No	width configures Table.
`align`	`"left" \| "center" \| "right"`	No	align configures Table.
`className`	`string`	No	className configures Table.
`fixed`	`"left" \| "right" \| boolean`	No	fixed configures Table.
`ellipsis`	`boolean`	No	ellipsis configures Table.
`render`	`(value: unknown, record: T, index: number) => ReactNode`	No	render configures Table.
`sorter`	`TableSorter<T>`	No	sorter configures Table.
`sortOrder`	`SortOrder`	No	sortOrder configures Table.
`defaultSortOrder`	`SortOrder`	No	defaultSortOrder configures Table.
`sortDirections`	`SortOrder[]`	No	sortDirections configures Table.
`filters`	`TableFilterItem[]`	No	filters configures Table.
`filteredValue`	`FilterValue \| null`	No	filteredValue configures Table.
`defaultFilteredValue`	`FilterValue \| null`	No	defaultFilteredValue configures Table.
`filterMultiple`	`boolean`	No	filterMultiple configures Table.
`onFilter`	`(value: string \| number \| boolean \| null, record: T) => boolean`	No	onFilter configures Table.
`children`	`TableColumnsType<T>`	No	children configures Table.
`onCell`	`(record: T, index: number) => ComponentProps<"td">`	No	onCell configures Table.
`onHeaderCell`	`(column: TableColumnType<T>) => ComponentProps<"th">`	No	onHeaderCell configures Table.

TablePaginationConfiginterface

Prop	Type	Required	Description
`current`	`number`	No	current configures Table.
`defaultCurrent`	`number`	No	defaultCurrent configures Table.
`pageSize`	`number`	No	pageSize configures Table.
`defaultPageSize`	`number`	No	defaultPageSize configures Table.
`total`	`number`	No	total configures Table.
`disabled`	`boolean`	No	disabled configures Table.
`hideOnSinglePage`	`boolean`	No	hideOnSinglePage configures Table.
`showTotal`	`(total: number, range: [number, number]) => ReactNode`	No	showTotal configures Table.
`onChange`	`(page: number, pageSize: number) => void`	No	onChange configures Table.

TableFilterIteminterface

Prop	Type	Required	Description
`text`	`ReactNode`	Yes	text configures Table.
`value`	`string \| number \| boolean`	Yes	value configures Table.
`children`	`TableFilterItem[]`	No	children configures Table.

TableColumnGroupTypeinterface extends <T = TableRecord> extends Omit< TableColumnType<T>, "dataIndex" | "render" | "sorter" | "filters" >

Prop	Type	Required	Description
`children`	`TableColumnsType<T>`	Yes	children configures Table.

SorterResultinterface extends <T = TableRecord>

Prop	Type	Required	Description
`column`	`TableColumnType<T>`	No	column configures Table.
`columnKey`	`TableKey`	No	columnKey configures Table.
`field`	`DataIndex`	No	field configures Table.
`order`	`SortOrder`	No	order configures Table.

TableCurrentDataSourceinterface extends <T = TableRecord>

Prop	Type	Required	Description
`currentDataSource`	`T[]`	Yes	currentDataSource configures Table.
`action`	`"paginate" \| "sort" \| "filter"`	Yes	action configures Table.

TableRowSelectioninterface extends <T = TableRecord>

Prop	Type	Required	Description
`type`	`"checkbox" \| "radio"`	No	type configures Table.
`selectedRowKeys`	`TableKey[]`	No	selectedRowKeys configures Table.
`defaultSelectedRowKeys`	`TableKey[]`	No	defaultSelectedRowKeys configures Table.
`hideSelectAll`	`boolean`	No	hideSelectAll configures Table.
`columnTitle`	`ReactNode`	No	columnTitle configures Table.
`getCheckboxProps`	`(record: T) => ComponentProps<"input">`	No	getCheckboxProps configures Table.
`renderCell`	`(`	No	renderCell configures Table.
`checked`	`boolean,`	Yes	checked configures Table.
`record`	`T,`	Yes	record configures Table.
`index`	`number,`	Yes	index configures Table.
`originNode`	`ReactNode,`	Yes	originNode configures Table.
`onChange`	`(selectedRowKeys: TableKey[], selectedRows: T[]) => void`	No	onChange configures Table.
`onSelect`	`(`	No	onSelect configures Table.
`record`	`T,`	Yes	record configures Table.
`selected`	`boolean,`	Yes	selected configures Table.
`selectedRows`	`T[],`	Yes	selectedRows configures Table.
`nativeEvent`	`Event,`	Yes	nativeEvent configures Table.
`onSelectAll`	`(`	No	onSelectAll configures Table.
`selected`	`boolean,`	Yes	selected configures Table.
`selectedRows`	`T[],`	Yes	selectedRows configures Table.
`changedRows`	`T[],`	Yes	changedRows configures Table.

TableExpandableConfiginterface extends <T = TableRecord>

Prop	Type	Required	Description
`expandedRowKeys`	`TableKey[]`	No	expandedRowKeys configures Table.
`defaultExpandedRowKeys`	`TableKey[]`	No	defaultExpandedRowKeys configures Table.
`expandedRowRender`	`(`	No	expandedRowRender configures Table.
`record`	`T,`	Yes	record configures Table.
`index`	`number,`	Yes	index configures Table.
`indent`	`number,`	Yes	indent configures Table.
`expanded`	`boolean,`	Yes	expanded configures Table.
`rowExpandable`	`(record: T) => boolean`	No	rowExpandable configures Table.
`expandRowByClick`	`boolean`	No	expandRowByClick configures Table.
`columnTitle`	`ReactNode`	No	columnTitle configures Table.
`onExpand`	`(expanded: boolean, record: T) => void`	No	onExpand configures Table.
`onExpandedRowsChange`	`(expandedKeys: TableKey[]) => void`	No	onExpandedRowsChange configures Table.

TableLocaleinterface

Prop	Type	Required	Description
`emptyText`	`ReactNode`	No	emptyText configures Table.

TableSummaryPropsinterface extends ComponentProps<"tfoot">

Prop	Type	Required	Description
`fixed`	`boolean \| "top" \| "bottom"`	No	fixed configures Table.

TableKeytype

string | number

TableRecordtype

Record<string, unknown>

DataIndextype

string | number | readonly (string | number)[]

SortOrdertype

"ascend" | "descend" | null

FilterValuetype

Array<string | number | boolean | null>

TableSizetype

"small" | "middle" | "large"

TableSummaryRowPropstype

ComponentProps<"tr">

TableSummaryCellPropstype

ComponentProps<"td"> & { index?: number

TableColumnComponenttype

ForwardRefExoticComponent< TableColumnProps & RefAttributes<HTMLTableCellElement> >

TableColumnGroupComponenttype

ForwardRefExoticComponent< TableColumnGroupProps & RefAttributes<HTMLTableCellElement> >

TableSummaryComponenttype

ForwardRefExoticComponent< TableSummaryProps & RefAttributes<HTMLTableSectionElement> > & { Row: ForwardRefExoticComponent< TableSummaryRowProps & RefAttributes<HTMLTableRowElement> >

TableComponenttype

(<T = TableRecord>( props: TableProps<T> & RefAttributes<HTMLDivElement>, ) => ReactElement | null) & { Column: TableColumnComponent