@shridey/intelligentable
Version:
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.
324 lines (248 loc) • 10.1 kB
Markdown
# Intelligentable by @shridey
> 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.
## 📦 Installation
```bash
npm install @shridey/intelligentable
```
## Changelog
See the [CHANGELOG](./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.
- 🎨 **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
])
}
// ...
/>
```
## 🌈 Theme Customization
Customize table appearance via `tableThemeConfig`:
```tsx
<IntelligentTable
tableThemeConfig={{
legends: { fontSize: "14px", backgroundColor: "#f0f0f0" },
searchBox: { colorText: "#333", placeholderText: "Type to search..." },
exportButton: { defaultBg: "#1890ff", defaultColor: "#fff" },
defaultSummaryRow: { backgroundColor: "#fafafa", fontWeight: "bold" },
}}
// ...
/>
```
## 📜 License
MIT © @shridey | Made with ❤️ in Mumbai 🇮🇳
## ✨ More IntelligentComponents Coming Soon!
Stay tuned for updates and new components.
> _Questions or suggestions?_
> Create an issue or start a discussion on [GitHub](https://github.com/shridey/intelligentable/issues)