Configuration

Configuration

WitEngineConfig

The core engine accepts the following configuration:

interface WitEngineConfig {
  columns: ColumnDef[];           // Required. Column definitions.
  data?: Record<string, unknown>[]; // Initial row data.
  rowCount?: number;              // Total row count (for virtual scrolling without full data).
  width?: number | string;        // Container width. Number (px) or CSS string.
  height?: number | string;       // Container height. Number (px) or CSS string.
  editable?: boolean;             // Enable cell editing. Default: false.
  sortable?: boolean;             // Enable column sorting. Default: false.
  frozenRows?: number;            // Number of rows to freeze at the top.
  frozenColumns?: number;         // Number of columns to freeze on the left.
  rowHeight?: number;             // Row height in pixels. Default from theme.
  headerHeight?: number;          // Header row height in pixels. Default from theme.
  showGridLines?: boolean;        // Show cell grid lines. Default: true.
  showRowNumbers?: boolean;       // Show row number column. Default: true.
  theme?: WitTheme;               // Custom theme object.
}

ColumnDef

Each column is defined with a ColumnDef object:

interface ColumnDef {
  key: string;          // Unique column identifier. Maps to data field.
  title: string;        // Display title in column header.
  width: number;        // Column width in pixels.
  minWidth?: number;    // Minimum width when resizing.
  maxWidth?: number;    // Maximum width when resizing.
  type?: CellType;      // Cell data type. Default: 'string'.
  frozen?: boolean;     // Freeze this column to the left.
  sortable?: boolean;   // Allow sorting on this column. Overrides table-level setting.
  filterable?: boolean; // Show filter icon in column header.
  editable?: boolean;   // Allow editing cells in this column. Overrides table-level setting.
  resizable?: boolean;  // Allow column width resizing via drag.
  hidden?: boolean;     // Hide this column from view.
}

Cell Types

The type field accepts one of these values:

Type	Description
'string'	Plain text (default)
'number'	Numeric values with right-alignment
'boolean'	Checkbox rendering
'date'	Date values with locale formatting
'select'	Dropdown with predefined options
'dynamicSelect'	Dropdown with runtime-resolved options
'formula'	Computed cell (requires formula plugin)
'link'	Clickable hyperlink
'image'	Image thumbnail in cell
'progressBar'	Horizontal progress bar
'rating'	Star rating display
'badge'	Colored badge/tag
'custom'	Custom renderer via CellTypeRegistry

Common Configurations

Read-Only Table

<WitTable
  columns={columns}
  data={data}
  editable={false}
  sortable={true}
  height={500}
/>

Fully Editable Table

<WitTable
  columns={columns}
  data={data}
  editable={true}
  sortable={true}
  height={500}
  onCellChange={(event) => {
    saveToServer(event.row, event.col, event.newValue);
  }}
/>

Frozen Panes

<WitTable
  columns={columns}
  data={data}
  frozenRows={1}
  frozenColumns={2}
  height={600}
/>

Frozen panes create four rendering regions: corner (frozen row + frozen col), frozen-row strip, frozen-col strip, and scrollable main content.

Sortable and Filterable

const columns: ColumnDef[] = [
  { key: 'name', title: 'Name', width: 180, sortable: true, filterable: true },
  { key: 'age', title: 'Age', width: 80, type: 'number', sortable: true, filterable: true },
  { key: 'email', title: 'Email', width: 250, sortable: true },
];

Column-level sortable and filterable override the table-level sortable setting.

WitTable React Props

The React wrapper accepts all WitEngineConfig fields as props, plus event callbacks:

<WitTable<TRow>
  // ... all WitEngineConfig fields ...
  onCellChange={(event) => {}}
  onSelectionChange={(event) => {}}
  onSortChange={(event) => {}}
  onFilterChange={(event) => {}}
  onReady={() => {}}
/>

See Events for the full list of available callbacks.