@contexis/wp-datatable

Reusable data table components for WordPress admin and Gutenberg-oriented UIs.

Scope

This package is intentionally WordPress-specific:

• It uses @wordpress/element as its React layer.
• It uses @wordpress/i18n for translations.
• Its markup and styling follow familiar WordPress admin table patterns.

Installation

npm install @contexis/wp-datatable

The consuming project must also provide:

• @wordpress/element
• @wordpress/i18n

Usage

import DataTable from '@contexis/wp-datatable';
import '@contexis/wp-datatable/style.css';

or:

import { DataTable } from '@contexis/wp-datatable';
import '@contexis/wp-datatable/style.css';

API

DataTable

Main component export.

<DataTable
	data={data}
	fields={fields}
	view={view}
	onChangeView={onChangeView}
	isLoading={isLoading}
	availableStatusItems={statusItems}
/>

Main props

• data: Array<T>: The rows to render.
• fields: Array<DataFieldConfig>: Field definitions, labels, renderers, sorting, and filters.
• view: DataViewConfig: Current table state such as active columns, sorting, filters, search, and pagination.
• onChangeView: (updates: Partial<DataViewConfig>) => void: Called whenever the table requests state changes.
• isLoading: boolean: Controls loading state.
• availableStatusItems: Array<DataStatusItem>: Status filter items rendered above the table.
• actions?: Array<DataTableAction>: Row-level actions.
• paginationInfo?: DataPaginationInfo: Total item/page counts for pagination.
• variant?: 'default' | 'plugins': Table styling variant.
• title?: string: Header title.
• createLink?: string: Optional link for a primary create action.
• createLinkLabel?: string: Label for the create action.
• screenMeta?: boolean: Enables the WordPress-style screen options area.
• views?: Array<DataViewOption>: Optional view switcher entries.
• children?: React.ReactNode: Optional custom layout instead of the default composed table sections.

Subcomponents

The package also exposes static subcomponents on DataTable:

• DataTable.Header
• DataTable.Filter
• DataTable.Table
• DataTable.StatusSelect
• DataTable.Pagination

These are useful if you want to replace the default layout with a custom composition.

Exported types

The package exports these main types:

• DataFieldConfig
• DataPaginationInfo
• DataStatusItem
• DataTableAction
• DataViewConfig
• DataViewOption
• DataViewType

Build

npm run build

Test

npm test