grassroot
Install

DocsAPI referenceUI machinesdata-table

data-table machine

The public state machine contract for @grassroot/ui-machines/data-table. The machine owns behaviour; the matching headless layer owns composition.

@grassroot/ui-machines/data-table

Package

28 exports
View source packages/ui-machines/src/data-table/index.ts

Service example

data-table.tsts
import { createService } from "@grassroot/statechart";
import { dataTableMachine } from "@grassroot/ui-machines/data-table";
 
const service = createService(dataTableMachine, { input: {} });
service.start();
service.send({ type: "…" });
service.stop();

Exports

createDataTableSortState

function

Duplicate of frozen `createDataTableSortState`.

DeclarationView source
createDataTableSortStatets
declare function createDataTableSortState(defaultSort?: string | null): DataTableSortState;
Name
Kind
Type
Requirement
defaultSort
parameter
string | null
optional
return
return value
DataTableSortState
n/a
Name
defaultSort
Kind
parameter
Type
string | null
Requirement
optional
Name
return
Kind
return value
Type
DataTableSortState
Requirement
n/a

DataTableCommand

type
DeclarationView source
DataTableCommandts
type DataTableCommand = SelectionCommand;

DataTableContext

type
DeclarationView source
DataTableContextts
type DataTableContext = {
  readonly sortKey: string | null;
  readonly dir: DataTableSortDir;
  readonly selection: SelectionMachineState;
};
Name
Kind
Type
Requirement
dir
property
DataTableSortDir
required
selection
property
SelectionMachineState
required
sortKey
property
string | null
required
Name
dir
Kind
property
Type
DataTableSortDir
Requirement
required
Name
selection
Kind
property
Type
SelectionMachineState
Requirement
required
Name
sortKey
Kind
property
Type
string | null
Requirement
required

DataTableDiagnosticCodes

value
DeclarationView source
DataTableDiagnosticCodests
export declare const DataTableDiagnosticCodes: readonly DiagnosticCatalogueEntry[];

DataTableEvent

type
DeclarationView source
DataTableEventts
type DataTableEvent = SelectionEvent | {
  readonly type: "TOGGLE_SORT";
  readonly key: string;
  readonly sortable: boolean;
};

DataTableInput

type
DeclarationView source
DataTableInputts
type DataTableInput = {
  readonly defaultSort?: string | null;
  readonly selectionMode?: SelectionMode;
  readonly selectedIds?: SelectionValue;
  readonly defaultSelectedIds?: SelectionValue;
  readonly orderedIds?: readonly string[];
  readonly disabledIds?: readonly string[];
};
Name
Kind
Type
Requirement
defaultSelectedIds
property
SelectionValue
optional
defaultSort
property
string | null
optional
disabledIds
property
readonly string[]
optional
orderedIds
property
readonly string[]
optional
selectedIds
property
SelectionValue
optional
selectionMode
property
SelectionMode
optional
Name
defaultSelectedIds
Kind
property
Type
SelectionValue
Requirement
optional
Name
defaultSort
Kind
property
Type
string | null
Requirement
optional
Name
disabledIds
Kind
property
Type
readonly string[]
Requirement
optional
Name
orderedIds
Kind
property
Type
readonly string[]
Requirement
optional
Name
selectedIds
Kind
property
Type
SelectionValue
Requirement
optional
Name
selectionMode
Kind
property
Type
SelectionMode
Requirement
optional

dataTableMachine

value
DeclarationView source
dataTableMachinets
export declare const dataTableMachine: DataTableMachine;

DataTableMachine

type
DeclarationView source
DataTableMachinets
type DataTableMachine = Machine<DataTableInput, DataTableStateValue, DataTableContext, DataTableEvent, DataTableCommand>;

DataTableMachineState

type
DeclarationView source
DataTableMachineStatets
type DataTableMachineState = MachineState<DataTableStateValue, DataTableContext>;

dataTableReplaySequence

value
DeclarationView source
dataTableReplaySequencets
export declare const dataTableReplaySequence: readonly DataTableEvent[];

dataTableSelectors

value
DeclarationView source
dataTableSelectorsts
export declare const dataTableSelectors: {
  sortKey: (snapshot: DataTableSnapshot) => string | null;
  dir: (snapshot: DataTableSnapshot) => DataTableSortDir;
  selectedIds: (snapshot: DataTableSnapshot) => SelectionValue;
  anchorId: (snapshot: DataTableSnapshot) => string | null;
  bindingMode: (snapshot: DataTableSnapshot) => BindingMode;
  selection: (snapshot: DataTableSnapshot) => SelectionMachineState;
};
Name
Kind
Type
Requirement
anchorId
property
(snapshot: DataTableSnapshot) => string | null
required
bindingMode
property
(snapshot: DataTableSnapshot) => BindingMode
required
dir
property
(snapshot: DataTableSnapshot) => DataTableSortDir
required
selectedIds
property
(snapshot: DataTableSnapshot) => SelectionValue
required
selection
property
(snapshot: DataTableSnapshot) => SelectionMachineState
required
sortKey
property
(snapshot: DataTableSnapshot) => string | null
required
Name
anchorId
Kind
property
Type
(snapshot: DataTableSnapshot) => string | null
Requirement
required
Name
bindingMode
Kind
property
Type
(snapshot: DataTableSnapshot) => BindingMode
Requirement
required
Name
dir
Kind
property
Type
(snapshot: DataTableSnapshot) => DataTableSortDir
Requirement
required
Name
selectedIds
Kind
property
Type
(snapshot: DataTableSnapshot) => SelectionValue
Requirement
required
Name
selection
Kind
property
Type
(snapshot: DataTableSnapshot) => SelectionMachineState
Requirement
required
Name
sortKey
Kind
property
Type
(snapshot: DataTableSnapshot) => string | null
Requirement
required

DataTableSnapshot

type
DeclarationView source
DataTableSnapshotts
type DataTableSnapshot = Snapshot<DataTableStateValue, DataTableContext>;

DataTableSortAction

type
DeclarationView source
DataTableSortActionts
type DataTableSortAction = {
  readonly type: "toggle";
  readonly key: string;
  readonly sortable: boolean;
};
Name
Kind
Type
Requirement
key
property
string
required
sortable
property
boolean
required
type
property
"toggle"
required
Name
key
Kind
property
Type
string
Requirement
required
Name
sortable
Kind
property
Type
boolean
Requirement
required
Name
type
Kind
property
Type
"toggle"
Requirement
required

DataTableSortDir

type
DeclarationView source
DataTableSortDirts
type DataTableSortDir = "asc" | "desc";

DataTableSortState

type
DeclarationView source
DataTableSortStatets
type DataTableSortState = {
  readonly sortKey: string | null;
  readonly dir: DataTableSortDir;
};
Name
Kind
Type
Requirement
dir
property
DataTableSortDir
required
sortKey
property
string | null
required
Name
dir
Kind
property
Type
DataTableSortDir
Requirement
required
Name
sortKey
Kind
property
Type
string | null
Requirement
required

DataTableStateValue

type
DeclarationView source
DataTableStateValuets
type DataTableStateValue = "active";

EMPTY_SELECTION_IDS

value
DeclarationView source
EMPTY_SELECTION_IDSts
export declare const EMPTY_SELECTION_IDS: SelectionValue;

reduceDataTableSort

function

Duplicate of frozen `reduceDataTableSort`.

DeclarationView source
reduceDataTableSortts
declare function reduceDataTableSort(state: DataTableSortState, action: DataTableSortAction): DataTableSortState;
Name
Kind
Type
Requirement
state
parameter
DataTableSortState
required
action
parameter
DataTableSortAction
required
return
return value
DataTableSortState
n/a
Name
state
Kind
parameter
Type
DataTableSortState
Requirement
required
Name
action
Kind
parameter
Type
DataTableSortAction
Requirement
required
Name
return
Kind
return value
Type
DataTableSortState
Requirement
n/a

sameSelectionIds

function
DeclarationView source
sameSelectionIdsts
declare function sameSelectionIds(left: SelectionValue, right: SelectionValue): boolean;
Name
Kind
Type
Requirement
left
parameter
SelectionValue
required
right
parameter
SelectionValue
required
return
return value
boolean
n/a
Name
left
Kind
parameter
Type
SelectionValue
Requirement
required
Name
right
Kind
parameter
Type
SelectionValue
Requirement
required
Name
return
Kind
return value
Type
boolean
Requirement
n/a

SelectionChangeDetail

type
DeclarationView source
SelectionChangeDetailts
type SelectionChangeDetail = {
  readonly selectedIds: SelectionValue;
  readonly reason: SelectionChangeReason;
};
Name
Kind
Type
Requirement
reason
property
SelectionChangeReason
required
selectedIds
property
SelectionValue
required
Name
reason
Kind
property
Type
SelectionChangeReason
Requirement
required
Name
selectedIds
Kind
property
Type
SelectionValue
Requirement
required

SelectionChangeReason

type
DeclarationView source
SelectionChangeReasonts
type SelectionChangeReason = "pointer" | "keyboard" | "programmatic";

SelectionCommand

type
DeclarationView source
SelectionCommandts
type SelectionCommand = CommandObject & {
  readonly type: "SELECTION_CHANGE_REQUEST";
  readonly selectedIds: SelectionValue;
  readonly reason: SelectionChangeReason;
};
Name
Kind
Type
Requirement
reason
property
SelectionChangeReason
required
selectedIds
property
SelectionValue
required
type
property
string
required
Name
reason
Kind
property
Type
SelectionChangeReason
Requirement
required
Name
selectedIds
Kind
property
Type
SelectionValue
Requirement
required
Name
type
Kind
property
Type
string
Requirement
required

selectionInputFromDataTable

function
DeclarationView source
selectionInputFromDataTablets
declare function selectionInputFromDataTable(input: DataTableInput): SelectionInput;
Name
Kind
Type
Requirement
input
parameter
DataTableInput
required
return
return value
SelectionInput
n/a
Name
input
Kind
parameter
Type
DataTableInput
Requirement
required
Name
return
Kind
return value
Type
SelectionInput
Requirement
n/a

selectionMachine

value
DeclarationView source
selectionMachinets
export declare const selectionMachine: SelectionMachine;

SelectionMode

type
DeclarationView source
SelectionModets
type SelectionMode = "none" | "single" | "multiple";

selectionSelectors

value
DeclarationView source
selectionSelectorsts
export declare const selectionSelectors: {
  selectedIds: (snapshot: SelectionSnapshot) => SelectionValue;
  anchorId: (snapshot: SelectionSnapshot) => string | null;
  bindingMode: (snapshot: SelectionSnapshot) => BindingMode;
  isSelected: (snapshot: SelectionSnapshot, id: string) => boolean;
};
Name
Kind
Type
Requirement
anchorId
property
(snapshot: SelectionSnapshot) => string | null
required
bindingMode
property
(snapshot: SelectionSnapshot) => BindingMode
required
isSelected
property
(snapshot: SelectionSnapshot, id: string) => boolean
required
selectedIds
property
(snapshot: SelectionSnapshot) => SelectionValue
required
Name
anchorId
Kind
property
Type
(snapshot: SelectionSnapshot) => string | null
Requirement
required
Name
bindingMode
Kind
property
Type
(snapshot: SelectionSnapshot) => BindingMode
Requirement
required
Name
isSelected
Kind
property
Type
(snapshot: SelectionSnapshot, id: string) => boolean
Requirement
required
Name
selectedIds
Kind
property
Type
(snapshot: SelectionSnapshot) => SelectionValue
Requirement
required

SelectionValue

type
DeclarationView source
SelectionValuets
type SelectionValue = readonly string[];

sortDataTableRows

function

Duplicate of frozen `sortDataTableRows`.

DeclarationView source
sortDataTableRowsts
declare function sortDataTableRows<T>(data: readonly T[], column: {
  readonly key: keyof T & string;
  readonly num?: boolean;
  readonly sortable?: boolean;
  readonly compare?: (a: T, b: T) => number;
} | undefined, direction: DataTableSortDir): T[];
Name
Kind
Type
Requirement
data
parameter
readonly T[]
required
column
parameter
{ readonly key: keyof T & string; readonly num?: boolean; readonly sortable?: boolean; readonly compare?: (a: T, b: T) => number; } | undefined
required
direction
parameter
DataTableSortDir
required
return
return value
T[]
n/a
Name
data
Kind
parameter
Type
readonly T[]
Requirement
required
Name
column
Kind
parameter
Type
{ readonly key: keyof T & string; readonly num?: boolean; readonly sortable?: boolean; readonly compare?: (a: T, b: T) => number; } | undefined
Requirement
required
Name
direction
Kind
parameter
Type
DataTableSortDir
Requirement
required
Name
return
Kind
return value
Type
T[]
Requirement
n/a