pace-table-lib 1.0.0 → 1.0.2

package/README.md

@@ -1,12 +1,189 @@
-# 📋 pace-table-lib
+---
+
+# pace-table-lib
 
-A lightweight, reusable, and customizable React Table component built with TypeScript. Ideal for rendering tabular data with dynamic columns and content.
+A lightweight React component library for rendering **highly-configurable, Excel-like static tables** with fixed headers, custom styles, and flexible measure formatting.
 
 ---
 
-## 📦 Installation
+## ✨ 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**
 
-Install the library in your project:
+---
+
+## 📦 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 (
+    <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`
+
+```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 
+
+---
+
+### Quick Example
+
+```tsx
+<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.
+
+---
+