---

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

``bash
npm install pace-table-lib

or

yarn add pace-table-lib
`

---

🔑 Basic Usage

`tsx
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 (
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. |

$3

`ts
{
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:

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

---

📐 Table Data Structure

The component expects a JSON object similar to:

`jsonc
{
"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:

`tsx
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:

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

---

🛠 Development

Clone the repo and run:

`bash
npm install
npm run dev
`

---

📄 License

MIT © 2025

---

$3

`tsx
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.

---