pace-table-lib

A lightweight React component library for rendering highly-configurable, Excel-like static tables with fixed headers, custom styles, and flexible measure formatting.

✨ Features

• Fixed left columns (freeze columns/rows for better readability)
• Grand total, row total, and column total support
• Custom number formatting (comma separators, precision, display units, etc.)
• Flexible styling via a single tableStyleProps object
• Fully typed with TypeScript

📦 Installation

npm install pace-table-lib
# or
yarn add pace-table-lib

🔑 Basic Usage

import React from "react";
import { StaticTable } from "pace-table-lib";
import { createMeasureFormattingMapping } from "./measureFormatHelper";

export default function App() {
  const tableData = /* your JSON from API or file */;

  return (
    <StaticTable
      tableData={tableData?.TableData}
      leftFixedCellNameList={tableData?.leftFixedCellNameList ?? [""]}
      tableStyleProps={tableData?.TableStyle?.TableStyle?.Style}
      tableWidth={800}
      tableHeight={600}
      measureFormatConfigs={() => createMeasureFormattingMapping()}
    />
  );
}

⚙️ Props

| Prop | Type | Required | Description | | ------------------------- | --------------------------- | -------- | ----------------------------------------------------------- | | tableData | TableData | ✅ | Data object describing rows, columns, totals, and measures. | | leftFixedCellNameList | string[] | ❌ | Names of columns to freeze on the left. | | tableStyleProps | object | ❌ | Style configuration (colors, fonts, borders, etc.). | | tableWidth | number | ✅ | Total table width in pixels. | | tableHeight | number | ✅ | Total table height in pixels. | | measureFormatConfigs | () => MeasureFormatConfig | ✅ | Function returning measure formatting rules. |

MeasureFormatConfig

{
  measureName: string;      // e.g., "New Patients"
  numberFormat: string;     // e.g., "Comma Separated"
  displayUnit: string;      // e.g., "None", "K", "M"
  decimalPrecision: number; // e.g., 2
}

Example:

export const createMeasureFormattingMapping = () => ({
  measureName: "New Patients",
  numberFormat: "Comma Separated",
  displayUnit: "None",
  decimalPrecision: 2
});

📐 Table Data Structure

The component expects a JSON object similar to:

{
  "TableData": {
    "customSortRowwise": ["1L", "2L", "Adj"],
    "grandTotal": 400701,
    "measuresBySlice": [
      {
        "sliceMark": ["1L", "Base"],
        "measures": [0, 0, 81087],
        "rowTotal": 81087
      },
      ...
    ],
    "columnTotalRow": [
      { "columnTotal": 148247, "maxValueInColumn": 89526, "minValueInColumn": 0 }
    ],
    "dimensionMarks": [["HCC"], ["RCC"], ["SCLC"]],
    "totalNumberOfRows": 9
  },
  "leftFixedCellNameList": ["LOT", "Scenario"],
  "TableStyle": {
    "TableStyle": {
      "Style": { /* font, color, border config */ }
    }
  }
}

Use your own API or static file to populate this structure.

🖌 Styling

Pass the tableStyleProps from your data:

tableStyleProps={tableData?.TableStyle?.TableStyle?.Style}

It supports:

• Row/Column header colors
• Borders & grid lines
• Conditional formatting (if enabled in your data)

🧩 TypeScript Support

The library ships with full type definitions. Import types as needed:

import { TableData, MeasureFormatConfig } from "pace-table-lib";

🛠 Development

Clone the repo and run:

npm install
npm run dev

📄 License

MIT © 2025

Quick Example

<StaticTable
  tableData={mockData.TableData}
  leftFixedCellNameList={["LOT", "Scenario"]}
  tableStyleProps={mockData.TableStyle.TableStyle.Style}
  tableWidth={1000}
  tableHeight={600}
  measureFormatConfigs={() => ({
    measureName: "New Patients",
    numberFormat: "Comma Separated",
    displayUnit: "None",
    decimalPrecision: 2
  })}
/>

This will render a scrollable, Excel-like table with frozen left columns and comma-separated numbers.