npm package: @shridey/intelligentable
Description: Intelligentable is a highly customizable, fully-types, performant, and feature-rich React component library built on top of handpicked industry-level production-grade UI Components for modern web applications.
Author: Shridhar Pandey
Latest version: 2.1.0

# Intelligentable by @shridey

<p align="center">
  <a href="https://www.npmjs.com/package/@shridey/intelligentable">
    <img src="https://img.shields.io/npm/v/@shridey/intelligentable?style=for-the-badge&logo=npm&label=Version" />
  </a>
  <a href="https://www.npmjs.com/package/@shridey/intelligentable">
    <img src="https://img.shields.io/npm/dm/@shridey/intelligentable?style=for-the-badge&logo=npm&label=Monthly%20Downloads" />
  </a>
  <a href="https://www.npmjs.com/package/@shridey/intelligentable">
    <img src="https://img.shields.io/npm/dt/@shridey/intelligentable?style=for-the-badge&logo=npm&label=Total%20Downloads" />
  </a>
</p>
<p align="center">
  <a href="https://github.com/shridey/intelligentable/blob/main/LICENSE">
    <img src="https://img.shields.io/npm/l/@shridey/intelligentable?style=for-the-badge&logo=github&label=License" />
  </a>
  <a href="https://github.com/shridey/intelligentable/pulls">
    <img src="https://img.shields.io/github/issues-pr/shridey/intelligentable?style=for-the-badge&logo=github&label=Pull%20Requests" />
  </a>
  <a href="https://github.com/shridey/intelligentable/issues">
    <img src="https://img.shields.io/github/issues/shridey/intelligentable?style=for-the-badge&logo=github&label=Issues" />
  </a>
  <a href="https://github.com/shridey/intelligentable/stargazers">
    <img src="https://img.shields.io/github/stars/shridey/intelligentable?style=for-the-badge&logo=github&label=Stars" />
  </a>
  <a href="https://github.com/shridey/intelligentable/network/members">
    <img src="https://img.shields.io/github/forks/shridey/intelligentable?style=for-the-badge&logo=github&label=Forks" />
  </a>
  <a href="https://github.com/shridey/intelligentable/graphs/contributors">
    <img src="https://img.shields.io/github/contributors/shridey/intelligentable?style=for-the-badge&logo=github&label=Contributors" />
  </a>
  <a href="https://github.com/shridey/intelligentable/commits/main">
    <img src="https://img.shields.io/github/last-commit/shridey/intelligentable?style=for-the-badge&logo=github&label=Last%20Commit" />
  </a>
</p>

> Intelligentable is a highly customizable, fully-typed, performant, and feature-rich React component library built on top of handpicked industry-level production-grade UI Components for modern web applications.

---

## 📦 Installation

```bash
npm install @shridey/intelligentable
```

## Changelog

See the [CHANGELOG](https://github.com/shridey/intelligentable/blob/main/CHANGELOG.md) for all updates and release notes.

---

## 🧠 IntelligentTable

IntelligentTable is a Modern React TypeScript Table Component built on top of Ant Design, providing advanced, smart, and highly customizable table component.

---

## ✨ Features

- 📊 **Automatic Sorting** – Enabled smart sorting by default for numbers, dates, days of week, currencies, percentages, ids and string.
- 📊 **Automatic Summary Row** – Built-in support for sum, average, count, max, and min operations per column.
- 🔍 **Universal Search** – Out-of-the-box search across all columns, or plug in your own custom logic.
- 🧩 **Composable Data Transformation Pipeline** – Chain and compose data transformation steps before rendering.
- 🔎 **Smart Numeric Filtering** – Out-of-the-box filter support for numbers, ids, percentages, and currencies. Supports exact match (42) and range queries (10-50).
- 🎨 **Legends** – Dynamic legend generation based on column color rules, with customizable styles.
- 📤 **Export** – Export table data to Excel (XLSX), PDF, JSON, CSV, and TSV formats.
- 🏷️ **Dynamic Cell Coloring** – Apply colors to cells based on value thresholds, string matches, or regex.
- 🌈 **Themeable** – Fully customize every visual aspect of the table, including legends, summary rows, search box, export buttons, and more.
- 🛠️ **Type Safety** – All props and features are fully typed for maximum reliability.

---

## 🚀 Quick Start Example

```tsx
import { IntelligentTable } from "@shridey/intelligentable";
import type { IntelligentTableColumnType } from "@shridey/intelligentable";

function App() {
  const columns: IntelligentTableColumnType[] = [
    {
      title: "Name",
      dataIndex: "name",
      summaryOperation: "count",
    },
    {
      title: "Salary",
      dataIndex: "salary",
      summaryOperation: "sum",
      colorConfig: [
        { min: 0, max: 50000, color: "red" },
        { min: 50000, max: 100000, inclusiveMax: true, color: "green" },
      ],
    },
  ];

  const dataSource = [
    { key: 1, name: "Alice", salary: 40000 },
    { key: 2, name: "Bob", salary: 60000 },
  ];

  return (
    <IntelligentTable
      columns={columns}
      dataSource={dataSource}
      defaultSummary={{ enable: true, fixed: "bottom" }}
      enableLegends
      search={{ enable: true }}
      tableExport={{ enable: true, exportFileName: "MyTable" }}
      tableThemeConfig={{
        legends: { fontSize: "12px" },
      }}
    />
  );
}

export default App;
```

---

## ⚙️ Full Props Reference

| Prop                      | Type                                                                                                          | Description                                                                                                             |
| ------------------------- | ------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
| `columns`                 | `IntelligentTableColumnType[] (extends AntD's TableColumnType)`                                               | Table columns, supports extra fields: `roundOff`, `colorConfig`, `summaryOperation`, `displaySummaryOperationInSummary` |
| `dataSource`              | `readonly AnyObject[] (AntD's)`                                                                               | Table data                                                                                                              |
| `defaultSummary`          | `{ enable?: boolean; fixed?: "top" \| "bottom" }`                                                             | Enables built-in summary row                                                                                            |
| `enableLegends`           | `boolean`                                                                                                     | Show legend box                                                                                                         |
| `search`                  | `{ enable: boolean; placeholder: string; onSearch?: (searchText, row, columns) => boolean }`                  | Built-in search or custom logic                                                                                         |
| `tableExport`             | `{ enable: boolean; exportFileName?: string; pdfFontOptions?: IntelligentTableExportButtonPDFFontOptionsType` | Enables export options                                                                                                  |
| `dataTransform`           | `(ctx: { pipeline }) => AnyObject[]`                                                                          | Chain data transformations                                                                                              |
| `tableThemeConfig`        | `IntelligentTableThemeConfigType (Table Theme from AntD's ThemeConfig)`                                       | Theme customization (legend, searchBox, exportButton etc)                                                               |
| ...other AntD Table props | Supported                                                                                                     | All other props from AntD's `<Table />` are supported                                                                   |

---

...

## 🔢 Automatic Smart Sorting

IntelligentTable automatically detects the data type of each column and applies the most appropriate sorting logic:

- **Numbers:** Sorted numerically
- **Strings:** Sorted alphabetically
- **Dates:** Sorted chronologically
- **Day of Week:** Starting from Sunday to Saturday
- **Currencies, Percentages, IDs:** Sorted by their respective types

**You do not need to specify a sorter manually—IntelligentTable does it for you!**

### Example: Smart Sorting

```tsx
import { IntelligentTable } from "@shridey/intelligentable";
import type { IntelligentTableColumnType } from "@shridey/intelligentable";

const columns: IntelligentTableColumnType[] = [
  {
    title: "Employee ID",
    dataIndex: "id",
    // Smart sorting will sort as numbers
  },
  {
    title: "Name",
    dataIndex: "name",
    // Smart sorting will sort alphabetically
  },
  {
    title: "Joining Date",
    dataIndex: "joiningDate",
    // Smart sorting will sort by date
  },
  {
    title: "Joining Day",
    dataIndex: "joiningDay",
    // Smart sorting will sort by day of week
  },
  {
    title: "Salary",
    dataIndex: "salary",
    // Smart sorting will sort numerically
  },
];

const dataSource = [
  { key: 1, id: 101, name: "Alice", joiningDate: "2022-01-15", salary: 40000 },
  { key: 2, id: 102, name: "Bob", joiningDate: "2021-11-03", salary: 60000 },
];

<IntelligentTable columns={columns} dataSource={dataSource} />;
```

### Overriding Smart Sorting with a Custom Sorter

If you want to override the automatic sorting for a column, simply provide your own `sorter` function:

```tsx
const columns: IntelligentTableColumnType[] = [
  {
    title: "Name",
    dataIndex: "name",
    // Override smart sorting with custom sorter
    sorter: (a, b) => a.name.length - b.name.length, // Sort by name length
  },
  // ...other columns
];
```

---

## 🧮 Summary Operations

Set via `summaryOperation` in column:

- `"sum"` – total
- `"average"` – mean
- `"count"` – count
- `"max"` – max value
- `"min"` – min value

**Example:**

```ts
{
  title: "Score",
  dataIndex: "score",
  summaryOperation: "average",
}
```

---

## 🎨 Dynamic Cell Coloring & Legends

Add dynamic coloring rules to columns:

```ts
colorConfig: [
  { min: 0, max: 50, color: "red" },
  { min: 50, max: 100, inclusiveMax: true, color: "green" },
  { str: "Pending", color: "orange" },
  { regEx: "^Error", color: "red" },
];
```

Legends are automatically generated and displayed when `enableLegends` is true.

---

## 🔍 Universal Search

Enable built-in search or provide your own logic:

```tsx
<IntelligentTable
  defaultUniversalSearch={{
    enable: true,
    onSearch: (searchText, row, columns) =>
      columns.some((col) => String(row[col.dataIndex]).includes(searchText)),
  }}
  // ...
/>
```

---

## 📤 Export

Export table data to:

- Excel (xlsx)
- PDF
- JSON
- CSV
- TSV

Enable via `tableExport` prop:

```tsx
import NotoSans from "@/assets/fonts/NotoSans-Regular.ttf";

<IntelligentTable
  tableExport={{
    enable: true,
    exportFileName: "Report",
    pdfFontOptions: {
      // Optional
      fontUrl: NotoSans,
      fontName: "NotoSans",
      fontFileName: "NotoSans-Regular.ttf",
      fontStyles: ["normal", "bold"],
      fallbackFont: "helvetiva", // Default
    },
  }}
  // ...
/>;
```

---

## 🧩 Data Transformation Pipeline

Chain multiple data transformation steps before rendering:

```tsx
<IntelligentTable
  dataTransform={({ pipeline }) =>
    pipeline([
      (data) => data.filter((row) => row.active),
      (data) => data.sort((a, b) => a.score - b.score),
      // ...other transformations
    ])
  }
  // ...
/>
```

---

## Numeric Value Filtering

```tsx
<IntelligentTable
  columns={[
    {
      title: "ID",
      dataIndex: "id",
      filters: [
        { text: "1", value: "1" },
        { text: "10–50", value: "10-50" },
      ],
    },
    {
      title: "Price",
      dataIndex: "price",
      filters: [
        { text: "100", value: "100" },
        { text: "500–1000", value: "500-1000" },
      ],
      // No need to write onFilters
    },
  ]}
  dataSource={[
    // On activating column filter, below values will be
    { id: 1, price: 200 }, // Filtered
    { id: 25, price: 800 }, // Visible
    { id: 60, price: 1200 }, // Filtered
    // Based on rules defined in filters above
  ]}
/>
```

---

## 🌈 Theme Customization

Customize table appearance via `tableThemeConfig`:

```tsx
<IntelligentTable
  tableThemeConfig={{
    legends: { fontSize: "14px", backgroundColor: "#f0f0f0" },
    searchBox: { colorText: "#333" },
    exportButton: { defaultBg: "#1890ff", defaultColor: "#fff" },
    defaultSummaryRow: { backgroundColor: "#fafafa", fontWeight: "bold" },
  }}
  // ...
/>
```

---

## 📜 License

[MIT](https://github.com/shridey/intelligentable/blob/main/LICENSE) | Made with ❤️ in Mumbai 🇮🇳

---

## ✨ More IntelligentComponents Coming Soon!

Stay tuned for updates and new components.

---

> _Wanna Talk:_ [Start a discussion](https://github.com/shridey/intelligentable/discussions) or [Create an issue](https://github.com/shridey/intelligentable/issues)