@furystack/shades-common-components
Version:
Common UI components for FuryStack Shades
127 lines • 4.15 kB
TypeScript
import type { FindOptions } from '@furystack/core';
import type { ChildrenList } from '@furystack/shades';
import type { CollectionService } from '../../services/collection-service.js';
export type StringFilterConfig = {
type: 'string';
};
export type NumberFilterConfig = {
type: 'number';
};
export type BooleanFilterConfig = {
type: 'boolean';
};
export type EnumFilterConfig = {
type: 'enum';
values: Array<{
label: string;
value: string;
}>;
};
export type DateFilterConfig = {
type: 'date';
};
export type ColumnFilterConfig = StringFilterConfig | NumberFilterConfig | BooleanFilterConfig | EnumFilterConfig | DateFilterConfig;
/**
* Loosely typed find options used internally by filter components.
* Avoids generic entity types while supporting dynamic field access
* with explicit casts at each use site.
*/
export type FilterableFindOptions = {
top?: number;
skip?: number;
order?: Record<string, 'ASC' | 'DESC'>;
filter?: Record<string, unknown>;
select?: string[];
};
export type DataHeaderCells<Column extends string> = {
[TKey in Column | 'default']?: (name: Column) => JSX.Element;
};
export type DataRowCells<T, Column extends string> = {
[TKey in Column | 'default']?: (element: T, state: {
focus?: T;
selection: T[];
}) => JSX.Element;
};
export interface DataGridProps<T, Column extends string> {
/**
* A list of columns to display
*/
columns: Column[];
/**
* Optional style overrides for the grid
*/
styles?: {
wrapper?: Partial<CSSStyleDeclaration>;
header?: Partial<CSSStyleDeclaration>;
cell?: Partial<CSSStyleDeclaration>;
};
/**
* A collection service to use for data source
*/
collectionService: CollectionService<T>;
/**
* The query settings to use for the data source
*/
findOptions: FindOptions<T, Array<keyof T>>;
/**
* Callback invoked when find options change (e.g. pagination, sorting, filtering)
*/
onFindOptionsChange: (options: FindOptions<T, Array<keyof T>>) => void;
/**
* A list of custom header components to use
*/
headerComponents?: DataHeaderCells<Column>;
/**
* A list of custom row components to use
*/
rowComponents?: DataRowCells<T, Column>;
/**
* Filter configuration per column. Only columns with a config will show a filter button.
*/
columnFilters?: {
[K in Column]?: ColumnFilterConfig;
};
/**
* Optional autoFocus property to set the grid as focused
*/
autofocus?: boolean;
/**
* Optional style to attach to grid rows when the row is focused
*/
focusedRowStyle?: Partial<CSSStyleDeclaration>;
/**
* Optional style to attach to grid rows when the row is not focused
*/
unfocusedRowStyle?: Partial<CSSStyleDeclaration>;
/**
* Optional style to attach to grid rows when the row is selected
*/
selectedRowStyle?: Partial<CSSStyleDeclaration>;
/**
* Optional style to attach to grid rows when the row is not selected
*/
unselectedRowStyle?: Partial<CSSStyleDeclaration>;
/**
* An optional component to show if there are no rows to display
*/
emptyComponent?: JSX.Element;
/**
* An optional component to show while the data is loading
*/
loaderComponent?: JSX.Element;
/**
* Custom list of items-per-page options shown in the footer selector.
* When only one option is provided, the selector is hidden.
* @default dataGridItemsPerPage ([10, 20, 25, 50, 100, Infinity])
*/
paginationOptions?: number[];
/**
* Section name for spatial navigation scoping.
* Sets `data-nav-section` on the grid wrapper so that SpatialNavigationService
* constrains arrow-key navigation within the grid.
* Auto-generated per instance when not provided.
*/
navSection?: string;
}
export declare const DataGrid: <T, Column extends string>(props: DataGridProps<T, Column>, children: ChildrenList) => JSX.Element<any>;
//# sourceMappingURL=data-grid.d.ts.map