Data DisplayDmduskmoonimplemented5 demos

DmTable

DmTable presents typed tabular records with search, pagination, and column controls.

Import@duskmoon-dev/components/dm-table

2API sections

16documented props

3behavior scenarios

Key API

nameextraindicatorsonColumnsChangecolumnSettingVisiblecolumnState

Usage

When to use

Use it in DuskMoon application screens that need a packaged, opinionated workflow component.
Reach for the lower-level standard component when the screen needs custom composition.

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

DuskMoon workflow wrapper

Wraps lower-level primitives into a higher-level DuskMoon-prefixed workflow API.

Application defaults

Examples show the defaults and composition points expected by internal DuskMoon app screens.

Primary API surface

DmTable is most often configured through `name`, `extra`, `indicators`, `onColumnsChange`.

Covered behavior

Filters table/search columns and renders table content

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 DmTable from its package subpath, then render it with the core props.

Source

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

export function Example() {
  return (<DmTable
  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 table/search columns and renders table content

test-backed

DmTable scenario from the component test coverage: filters table/search columns and renders table content.

Source

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

export function DmTableFiltersTableSearchColumnsDemo() {
  return (<DmTable
  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 extra, column settings, and pagination wrapper

test-backed

DmTable scenario from the component test coverage: renders extra, column settings, and pagination wrapper.

Source

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

export function DmTableRendersExtraColumnSettingsDemo() {
  return (<DmTable
  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

Exports table column filter helper

test-backed

DmTable scenario from the component test coverage: exports table column filter helper.

Source

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

export function DmTableExportsTableColumnFilterDemo() {
  return (<DmTable
  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">
  <DmTable
  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">
  <DmTable
  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 DmTable. Start with `name`, `extra`, `indicators`, `onColumnsChange` for common usage.

Types: packages/components/src/components/dm-table/DmTable.types.tsScenarios: packages/components/src/components/dm-table/DmTable.test.tsx

DmTablePropsinterface extends <T = TableRecord> extends Omit< TableProps<T>, "columns" | "pagination" >

Prop	Type	Required	Description
`name`	`ReactNode`	No	name configures DmTable.
`extra`	`ReactNode`	No	extra configures DmTable.
`indicators`	`ReactNode`	No	indicators configures DmTable.
`onColumnsChange`	`(columns: DmTableColumnsType<T>) => void`	No	onColumnsChange configures DmTable.
`columnSettingVisible`	`boolean`	No	columnSettingVisible configures DmTable.
`columnState`	`{`	No	columnState configures DmTable.
`persistenceKey`	`string`	Yes	persistenceKey configures DmTable.
`persistenceType`	`"localStorage"`	No	persistenceType configures DmTable.
`columns`	`DmTableColumnsType<T>`	Yes	columns configures DmTable.
`searchProps`	`Omit<DmSearchProps, "items"> & { items?: DmSearchItem[] }`	No	searchProps configures DmTable.
`tableExtra`	`ReactNode`	No	tableExtra configures DmTable.
`pagination`	`false \| DmPaginationProps`	No	pagination configures DmTable.

DmTableColumnTypeinterface extends <T = TableRecord> extends TableColumnType<T>

Prop	Type	Required	Description
`hideInTable`	`boolean`	No	hideInTable configures DmTable.
`onlySearch`	`boolean`	No	onlySearch configures DmTable.
`search`	`false \| DmSearchItem["search"]`	No	search configures DmTable.
`children`	`DmTableColumnsType<T>`	No	children configures DmTable.