sl-react-datagrid

A reusable, configurable data table component for React applications. This component provides a spreadsheet-like experience with features like cell editing, import/export functionality, and dynamic data handling.

Features

• Excel-like grid interface
• Cell editing
• CSV/Excel import/export
• Dynamic calculations between cells
• Custom styling options
• Row operations (add/delete)
• Summary calculations

Installation

npm install sl-react-datagrid
# or
yarn add sl-react-datagrid
# or
pnpm add sl-react-datagrid

Usage

import { EditableDataTable } from 'sl-react-datagrid';
import type { DataColumn, CalculationRule } from 'sl-react-datagrid';

// Define columns
const columns: DataColumn[] = [
  { id: "id", name: "ID", width: 60, type: "number", editable: false },
  { id: "item_name", name: "Item Name", width: 250, type: "text", editable: true },
  { id: "price", name: "Price", width: 120, type: "number", editable: true },
  { id: "qty", name: "Quantity", width: 80, type: "number", editable: true },
  { id: "total", name: "Total", width: 120, type: "number", editable: false },
];

// Define calculations
const calculations: CalculationRule[] = [
  {
    targetField: "total",
    dependsOn: ["price", "qty"],
    calculate: (row) => (row.price || 0) * (row.qty || 0),
  },
];

// Initial data
const data = [
  { id: 1, item_name: "Item 1", price: 100, qty: 2, total: 200 },
  { id: 2, item_name: "Item 2", price: 150, qty: 1, total: 150 },
];

// Component usage
function App() {
  return (
    <EditableDataTable
      data={data}
      columns={columns}
      calculations={calculations}
      options={{
        enableImport: true,
        enableExport: true,
        enableAddRow: true,
        enableDeleteRow: true,
        enableCalculations: true,
        showSummary: true,
        summaryField: "total",
        summaryFormatter: (value) => `$${value.toFixed(2)}`,
      }}
    />
  );
}

Props

EditableDataTable Props

| Prop | Type | Description | |------|------|-------------| | data | array | Initial data for the table | | columns | DataColumn[] | Column definitions | | calculations | CalculationRule[] | Calculation rules between cells | | options | object | Configuration options |

DataColumn Interface

interface DataColumn {
  id: string;
  name: string;
  width: number;
  type: 'text' | 'number' | 'select';
  editable: boolean;
  options?: string[]; // For select type only
}

CalculationRule Interface

interface CalculationRule {
  targetField: string;
  dependsOn: string[];
  calculate: (row: any) => any;
}

Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | enableImport | boolean | false | Enable CSV/Excel import | | enableExport | boolean | false | Enable CSV/Excel export | | enableAddRow | boolean | false | Enable adding new rows | | enableDeleteRow | boolean | false | Enable deleting rows | | enableCalculations | boolean | false | Enable cell calculations | | showSummary | boolean | false | Show summary row | | summaryField | string | undefined | Field to summarize | | summaryFormatter | function | undefined | Format summary value |

License

ISC