# Intelligentable by @shridey

> 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 ( ); } 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 `` 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 }, ]; ; ``` ### 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 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"; ; ``` --- ## ๐Ÿงฉ Data Transformation Pipeline Chain multiple data transformation steps before rendering: ```tsx pipeline([ (data) => data.filter((row) => row.active), (data) => data.sort((a, b) => a.score - b.score), // ...other transformations ]) } // ... /> ``` --- ## Numeric Value Filtering ```tsx ``` --- ## ๐ŸŒˆ Theme Customization Customize table appearance via `tableThemeConfig`: ```tsx ``` --- ## ๐Ÿ“œ 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)