@@ -129,26 +129,61 @@ function App() {
129
129
130
130
The MultiLevelTable component accepts the following props:
131
131
132
+ #### Data and Configuration Props
132
133
| Prop | Type | Required | Default | Description |
133
134
| ------| ------| ----------| ---------| -------------|
134
- | data | array | Yes | - | Array of data objects to display in the table |
135
- | columns | array | Yes | - | Array of column configurations |
135
+ | data | DataItem [ ] | Yes | - | Array of data objects to display in the table |
136
+ | columns | Column [ ] | Yes | - | Array of column configurations |
136
137
| pageSize | number | No | 10 | Number of rows to display per page |
137
- | theme | object | No | - | Custom theme object for styling the table |
138
+ | theme | ThemeProps | No | - | Custom theme object for styling the table |
138
139
| renderCustomPagination | function | No | null | Custom pagination component render function |
139
140
| sortable | boolean | No | false | Enable/disable sorting functionality |
140
141
| ascendingIcon | ReactNode | No | - | Custom icon for ascending sort |
141
142
| descendingIcon | ReactNode | No | - | Custom icon for descending sort |
142
143
| expandIcon | ReactNode | No | - | Custom icon for expanding rows |
143
144
| selectable | boolean | No | false | Enable/disable row selection |
144
- | onSelectionChange | function | No | - | Callback function when selection changes |
145
- | onRowClick | function | No | - | Callback function when a parent row is clicked |
146
- | onDelete | function | No | - | Callback function for row deletion |
147
- | searchable | boolean | No | true | Enable/disable global search functionality |
148
- | filterable | boolean | No | true | Enable/disable column filtering |
149
- | exportable | boolean | No | false | Enable/disable data export functionality |
150
- | exportFormats | array | No | [ 'csv', 'excel'] | Available export formats |
151
- | onExport | function | No | - | Custom export handler function |
145
+
146
+ #### State Props
147
+ | Prop | Type | Required | Description |
148
+ | ------| ------| ----------| -------------|
149
+ | selectionState | SelectionState | Yes | Current selection state with selected rows and all selected flag |
150
+ | searchTerm | string | Yes | Current search term for filtering data |
151
+ | selectedFilterValues | Set<string \| number> | Yes | Currently selected filter values |
152
+ | deletePopup | object | Yes | Delete confirmation popup state (isOpen, itemId, itemName) |
153
+ | bulkDeletePopup | object | Yes | Bulk delete confirmation popup state (isOpen, selectedCount) |
154
+ | openDropdowns | Set<string > | Yes | Set of currently open dropdown IDs |
155
+ | expandedRows | Set<string \| number> | Yes | Set of currently expanded row IDs |
156
+
157
+ #### Handler Props
158
+ | Prop | Type | Description |
159
+ | ------| ------| -------------|
160
+ | onSearchChange | (searchTerm: string) => void | Updates the search term for filtering data |
161
+ | onFilterChange | (values: Set<string \| number>) => void | Updates the selected filter values |
162
+ | onDeleteClick | (itemId: string \| number, itemName: string) => void | Handles delete button click for a specific row |
163
+ | onDeleteConfirm | () => void | Confirms the delete action for the selected row |
164
+ | onDeleteCancel | () => void | Cancels the delete action and closes popup |
165
+ | onBulkDeleteClick | () => void | Handles bulk delete button click for selected rows |
166
+ | onBulkDeleteConfirm | () => void | Confirms the bulk delete action for selected rows |
167
+ | onBulkDeleteCancel | () => void | Cancels the bulk delete action and closes popup |
168
+ | onDropdownToggle | (buttonId: string, isOpen: boolean) => void | Toggles dropdown open/close state for action buttons |
169
+ | onDropdownClose | (buttonId: string) => void | Closes a specific dropdown by ID |
170
+ | onButtonClick | (button: ButtonConfig) => void | Handles click events for action buttons (export, filter, etc.) |
171
+ | onSelectAll | () => void | Handles select all checkbox click to select/deselect all rows |
172
+ | onRowSelect | (rowId: string \| number) => void | Handles individual row selection checkbox click |
173
+ | onRowToggle | (rowId: string \| number) => void | Handles row expand/collapse toggle for nested rows |
174
+
175
+ #### Additional Props
176
+ | Prop | Type | Default | Description |
177
+ | ------| ------| ---------| -------------|
178
+ | onRowClick | (row: DataItem) => void | - | Callback function when a parent row is clicked |
179
+ | searchableColumns | string[ ] | - | Array of column keys to search in |
180
+ | showSearchBar | boolean | true | Whether to show the search bar |
181
+ | filterColumn | string | - | The column to filter by |
182
+ | tableTitle | string | - | Title displayed above the table |
183
+ | tableSubtitle | string | - | Subtitle displayed below the table title |
184
+ | showDarkMode | boolean | false | Whether to show dark mode toggle button |
185
+ | isDarkMode | boolean | false | Current dark mode state |
186
+ | onToggleTheme | () => void | - | Callback function to toggle between light/dark themes |
152
187
153
188
## 3. Customization
154
189
0 commit comments