A simple React + Vite + TS UI library with a Button using custom fonts via SCSS
npm install pace-table-lib---
tableStyleProps object
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
})}
/>
``