Data DisplayDmduskmoonimplemented4 demos

DmProTable

DmProTable presents records with a title bar, toolbar actions, and column controls.

Import@duskmoon-dev/components/dm-pro-table

1API sections

8documented props

2behavior scenarios

Key API

rowDataheaderTitletoolBarRendertoolbarItemsshowTitleBarcolumnSettingVisible

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

DmProTable is most often configured through `rowData`, `headerTitle`, `toolBarRender`, `toolbarItems`.

Covered behavior

Renders title bar, toolbar, and inner table rows

Feature Demos

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

Preview

Name
DuskMoon

Basic usage

authored

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

Source

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

export function Example() {
  return (<DmProTable
  columns={[{ title: "Name", dataIndex: "name", key: "name" }]}
  rowData={[{ key: 1, name: "DuskMoon" }]}
/>);
}

Preview

Name
DuskMoon

Renders title bar, toolbar, and inner table rows

test-backed

DmProTable scenario from the component test coverage: renders title bar, toolbar, and inner table rows.

Source

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

export function DmProTableRendersTitleBarToolbarDemo() {
  return (<DmProTable
  columns={[{ title: "Name", dataIndex: "name", key: "name" }]}
  rowData={[{ key: 1, name: "DuskMoon" }]}
/>);
}

Preview

Name
DuskMoon

Can hide title bar

test-backed

DmProTable scenario from the component test coverage: can hide title bar.

Source

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

export function DmProTableCanHideTitleBarDemo() {
  return (<DmProTable
  columns={[{ title: "Name", dataIndex: "name", key: "name" }]}
  rowData={[{ key: 1, name: "DuskMoon" }]}
/>);
}

Preview

Sunshine Theme

Name
DuskMoon

Moonlight Theme

Name
DuskMoon

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">
  <DmProTable
  columns={[{ title: "Name", dataIndex: "name", key: "name" }]}
  rowData={[{ key: 1, name: "DuskMoon" }]}
/>
</div>

<div data-theme="moonlight">
  <DmProTable
  columns={[{ title: "Name", dataIndex: "name", key: "name" }]}
  rowData={[{ key: 1, name: "DuskMoon" }]}
/>
</div>

API

The API reference below lists every parsed exported type or interface for DmProTable. Start with `rowData`, `headerTitle`, `toolBarRender`, `toolbarItems` for common usage.

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

DmProTablePropsinterface extends <T = TableRecord> extends Omit< DmTableProps<T>, "dataSource" >

Prop	Type	Required	Description
`rowData`	`T[]`	No	rowData configures DmProTable.
`headerTitle`	`ReactNode`	No	headerTitle configures DmProTable.
`toolBarRender`	`(() => ReactNode[] \| ReactNode) \| ReactNode[] \| ReactNode`	No	toolBarRender configures DmProTable.
`toolbarItems`	`DmToolbarItem[]`	No	toolbarItems configures DmProTable.
`showTitleBar`	`boolean`	No	showTitleBar configures DmProTable.
`columnSettingVisible`	`boolean`	No	columnSettingVisible configures DmProTable.
`onSortChanged`	`(`	No	onSortChanged configures DmProTable.
`sortColumns`	`Array<{ columnKey?: string \| number; order?: string \| null }>,`	Yes	sortColumns configures DmProTable.