SVAR Svelte DataGrid

The Grid component is the primary entrypoint for rendering the data table. It accepts a columns array of IColumnConfig and various props to control styling, selection, and responsiveness.

Key props include:

• columns: An array of IColumnConfig defining the table structure.
• rowStyle, columnStyle, cellStyle: Functions for dynamic styling of rows, columns, and cells.
• multiselect: Boolean to enable multiple row selection.
• reorder: Boolean to enable column reordering.
• draggableRows: Boolean or a function (row: IRow) => boolean to enable row dragging.
• responsive: An object mapping breakpoints to ISizeConfig and IColumnConfig[] for responsive layouts.
• init: A callback (api: IApi) => void to access the grid API immediately after initialization.
• hotkeys: Configuration for keyboard shortcuts.
• autoConfig: Boolean or IColumnConfig for automatic configuration.
• overlay: A string or Svelte Component to display as an overlay.

Grid events are automatically generated from TMethodsConfig using a hyphen-to-camelCase conversion (e.g., a method row-select becomes the prop onRowSelect).

<Grid
  columns={[
    { field: 'id', header: 'ID' },
    { field: 'name', header: 'Name', cell: MyCustomCell }
  ]}
  multiselect={true}
  reorder={true}
  rowStyle={(row) => row.active ? 'bg-blue-100' : ''}
/>

The createFilter function generates a single predicate function (obj: any) => boolean that evaluates whether a data object matches all active filter values. This is useful for manual filtering of data arrays.

To use it, provide:

1. filterValues: An object where keys correspond to column IDs and values are the filter criteria.
2. columns: An array of IFilterColumn objects defining the grid structure and filter types.

The resulting function performs an AND operation across all active filters; if any filter fails, the object is excluded.

// Example usage of createFilter
const activeFilters = { categoryId: 'electronics', status: 'active' };
const columns = [
  {
    id: 'categoryId',
    header: [{ filter: { type: 'richselect' } }]
  },
  {
    id: 'status',
    header: [{ filter: { type: 'text' } }]
  }
];

const isMatch = createFilter(activeFilters, columns);
const filteredData = data.filter(isMatch);

The IApi interface provides the primary programmatic interface for controlling the grid and reacting to its state changes.

Methods:

• exec<A>(action: A, params?: ...): Executes an asynchronous action defined in TMethodsConfig. Returns a Promise<any>.
• on<A>(action: A, callback: ...): Registers a listener for a specific action. The callback receives the action's configuration.
• intercept<A>(action: A, callback: ...): Intercepts an action before it is processed.
• detach(tag: IEventConfig['tag']): Removes listeners associated with a specific tag.
• getState(): Returns the current IData state.
• getReactiveState(): Returns an object where every key in IData is mapped to an IPublicWritable (allowing reactive updates in Svelte).

export interface IApi {
	exec: <A extends keyof TMethodsConfig | (string & {})>(
		action: A,
		params?: A extends keyof TMethodsConfig ? TMethodsConfig[A] : any
	) => Promise<any>;
	on: <A extends keyof TMethodsConfig | (string & {})>(
		action: A,
		callback: (
			config: A extends keyof TMethodsConfig ? TMethodsConfig[A] : any
		) => any,
		config?: IEventConfig
	) => void;
	intercept: <A extends keyof TMethodsConfig | (string & {})>(
		action: A,
		callback: (
			config: A extends keyof TMethodsConfig ? TMethodsConfig[A] : any
		) => any,
		config?: IEventConfig
	) => void;
	detach: (tag: IEventConfig["tag"]) => void;

getState: () => IData;
	getReactiveState: () => {
		[Key in keyof IData]: IPublicWritable<IData[Key]>;
	};
	setNext: (ev: IEventBus<TMethodsConfig>) => void;
	getStores: () => { data: DataStore };
	getRow: (row: TID) => IRow;
	getColumn: (column: TID) => IColumn;
}

The getCssName function computes the CSS class string for a grid cell based on column properties, cell spanning, and vertical alignment. It handles special classes for sticky/fixed columns, including shadow effects for boundary cells.

Parameters:

• column: Object. Contains column configuration, including fixed (positioning object), _colindex, and fixed.leftSize.
• cell: Object. Contains cell properties like colspan, rowspan, and vertical (boolean).
• columnStyle: Function (optional). A callback that accepts a column and returns a string of additional CSS classes.

Generated Classes:

• wx-fixed: Applied to fixed/sticky columns.
• wx-shadow: Applied to the boundary cell of a fixed column group to indicate a shadow effect.
• wx-rowspan: Applied if cell.rowspan > 1.
• wx-colspan: Applied if cell.colspan > 1.
• wx-vertical: Applied if cell.vertical is true.

import { getCssName } from './columnWidth.js';

const column = { _colindex: 0, fixed: { left: 100, leftSize: 1 } };
const cell = { colspan: 1, rowspan: 1, vertical: true };

const classes = getCssName(column, cell);
// Returns: "wx-fixed wx-vertical "