Control Tower Table

A flexible, JSON-driven, rule-based React table component for operational dashboards. Built with MUI DataGrid, supports dynamic styling and actions via simple rule definitions.

Installation

npm install control-tower-table
# or
yarn add control-tower-table

Peer dependencies:
You must also install these if not already present in your project:

npm install @mui/material @mui/x-data-grid @emotion/react @emotion/styled sass

Usage

1. Import the Component and Styles

import { ControlTowerTable, Rule } from 'control-tower-table';
import 'control-tower-table/dist/style.css'; // or .scss if you publish SCSS

2. Define Columns and Rows

import { GridColDef, GridRowsProp } from '@mui/x-data-grid';

const columns: GridColDef[] = [
  { field: 'id', headerName: 'ID', width: 90 },
  { field: 'name', headerName: 'Name', width: 150 },
  { field: 'status', headerName: 'Status', width: 120 },
];

const rows: GridRowsProp = [
  { id: 1, name: 'Order #1001', status: 'Pending' },
  { id: 2, name: 'Order #1002', status: 'Shipped' },
  { id: 3, name: 'Order #1003', status: 'Delivered' },
];

3. Define Rules

const rules: Rule[] = [
  {
    id: 'pending-warning',
    condition: { key: 'status', operator: 'eq', value: 'Pending' },
    style: {
      rowClass: 'warning', // Use built-in style
    },
  },
  {
    id: 'custom-row',
    condition: { key: 'status', operator: 'eq', value: 'Shipped' },
    style: {
      rowClass: 'my-special-row', // Use your own custom class
    },
  },
  {
    id: 'multiple-classes',
    condition: { key: 'status', operator: 'eq', value: 'Delivered' },
    style: {
      rowClass: 'success my-special-row', // Both built-in and custom
    },
  },
];

4. Render the Table

<ControlTowerTable
  rows={rows}
  columns={columns}
  rules={rules}
/>

Row Styling: Built-in and Custom Classes

• Built-in keys: Use rowClass: 'error', rowClass: 'warning', rowClass: 'success', rowClass: 'alert', or rowClass: 'info' to get the default styles (see below).
• Custom classes: Use any class name you want (e.g., rowClass: 'my-special-row'). Define your own CSS for these.
• Multiple classes: Space-separate class names (e.g., rowClass: 'warning my-special-row'). Both will be applied.

Predefined Class Names

• ct-row-error
• ct-row-warning
• ct-row-success
• ct-row-alert
• ct-row-info

These are mapped from the keys above and are already styled in your SCSS.

Rule Format

type Rule = {
  id: string;
  condition: Condition;
  style?: {
    rowClass?: string; // Built-in key, custom class, or both (space-separated)
    icon?: string;
    cellClassMap?: Record<string, string>;
    cellStyleMap?: Record<string, React.CSSProperties>;
  };
  action?: {
    type: 'modal' | 'link' | 'callback';
    label?: string;
    payload?: any;
    callback?: (row: any, action: any) => void;
  };
};

Styling

The following row classes are available by default:

• ct-row-error
• ct-row-warning
• ct-row-success
• ct-row-alert
• ct-row-info

You can also define custom cell classes (e.g., highlight-cell).
To override or extend styles, import your own CSS/SCSS after the package styles.

Example

import { ControlTowerTable, Rule } from 'control-tower-table';
import 'control-tower-table/dist/style.css';

const columns = [/* ... */];
const rows = [/* ... */];
const rules: Rule[] = [/* ... */];

<ControlTowerTable rows={rows} columns={columns} rules={rules} />;

License

MIT

Note:

• This package is React + TypeScript only.
• For advanced usage, see the full documentation or open an issue.