diff --git a/README.md b/README.md index d40782a..47a7f69 100644 --- a/README.md +++ b/README.md @@ -129,26 +129,61 @@ function App() { The MultiLevelTable component accepts the following props: +#### Data and Configuration Props | Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| -| data | array | Yes | - | Array of data objects to display in the table | -| columns | array | Yes | - | Array of column configurations | +| data | DataItem[] | Yes | - | Array of data objects to display in the table | +| columns | Column[] | Yes | - | Array of column configurations | | pageSize | number | No | 10 | Number of rows to display per page | -| theme | object | No | - | Custom theme object for styling the table | +| theme | ThemeProps | No | - | Custom theme object for styling the table | | renderCustomPagination | function | No | null | Custom pagination component render function | | sortable | boolean | No | false | Enable/disable sorting functionality | | ascendingIcon | ReactNode | No | - | Custom icon for ascending sort | | descendingIcon | ReactNode | No | - | Custom icon for descending sort | | expandIcon | ReactNode | No | - | Custom icon for expanding rows | | selectable | boolean | No | false | Enable/disable row selection | -| onSelectionChange | function | No | - | Callback function when selection changes | -| onRowClick | function | No | - | Callback function when a parent row is clicked | -| onDelete | function | No | - | Callback function for row deletion | -| searchable | boolean | No | true | Enable/disable global search functionality | -| filterable | boolean | No | true | Enable/disable column filtering | -| exportable | boolean | No | false | Enable/disable data export functionality | -| exportFormats | array | No | ['csv', 'excel'] | Available export formats | -| onExport | function | No | - | Custom export handler function | + +#### State Props +| Prop | Type | Required | Description | +|------|------|----------|-------------| +| selectionState | SelectionState | Yes | Current selection state with selected rows and all selected flag | +| searchTerm | string | Yes | Current search term for filtering data | +| selectedFilterValues | Set | Yes | Currently selected filter values | +| deletePopup | object | Yes | Delete confirmation popup state (isOpen, itemId, itemName) | +| bulkDeletePopup | object | Yes | Bulk delete confirmation popup state (isOpen, selectedCount) | +| openDropdowns | Set | Yes | Set of currently open dropdown IDs | +| expandedRows | Set | Yes | Set of currently expanded row IDs | + +#### Handler Props +| Prop | Type | Description | +|------|------|-------------| +| onSearchChange | (searchTerm: string) => void | Updates the search term for filtering data | +| onFilterChange | (values: Set) => void | Updates the selected filter values | +| onDeleteClick | (itemId: string \| number, itemName: string) => void | Handles delete button click for a specific row | +| onDeleteConfirm | () => void | Confirms the delete action for the selected row | +| onDeleteCancel | () => void | Cancels the delete action and closes popup | +| onBulkDeleteClick | () => void | Handles bulk delete button click for selected rows | +| onBulkDeleteConfirm | () => void | Confirms the bulk delete action for selected rows | +| onBulkDeleteCancel | () => void | Cancels the bulk delete action and closes popup | +| onDropdownToggle | (buttonId: string, isOpen: boolean) => void | Toggles dropdown open/close state for action buttons | +| onDropdownClose | (buttonId: string) => void | Closes a specific dropdown by ID | +| onButtonClick | (button: ButtonConfig) => void | Handles click events for action buttons (export, filter, etc.) | +| onSelectAll | () => void | Handles select all checkbox click to select/deselect all rows | +| onRowSelect | (rowId: string \| number) => void | Handles individual row selection checkbox click | +| onRowToggle | (rowId: string \| number) => void | Handles row expand/collapse toggle for nested rows | + +#### Additional Props +| Prop | Type | Default | Description | +|------|------|---------|-------------| +| onRowClick | (row: DataItem) => void | - | Callback function when a parent row is clicked | +| searchableColumns | string[] | - | Array of column keys to search in | +| showSearchBar | boolean | true | Whether to show the search bar | +| filterColumn | string | - | The column to filter by | +| tableTitle | string | - | Title displayed above the table | +| tableSubtitle | string | - | Subtitle displayed below the table title | +| showDarkMode | boolean | false | Whether to show dark mode toggle button | +| isDarkMode | boolean | false | Current dark mode state | +| onToggleTheme | () => void | - | Callback function to toggle between light/dark themes | ## 3. Customization diff --git a/src/components/MultiLevelTable.tsx b/src/components/MultiLevelTable.tsx index 5502972..62ee498 100644 --- a/src/components/MultiLevelTable.tsx +++ b/src/components/MultiLevelTable.tsx @@ -438,22 +438,25 @@ export const MultiLevelTable: React.FC = ({ if (!children || !expandedRows.has(parentId)) return null; return children.map((child) => ( - 0} - isExpanded={expandedRows.has(child.id)} - onToggle={() => onRowToggle(child.id)} - level={level} - theme={mergedTheme} - selectable={selectable} - isRowSelected={selectionState.selectedRows.has(child.id)} - onRowSelect={() => onRowSelect(child.id)} - onRowClick={onRowClick} - onDelete={handleDeleteClick} - expandIcon={expandIcon} - /> + + 0} + isExpanded={expandedRows.has(child.id)} + onToggle={() => onRowToggle(child.id)} + level={level} + theme={mergedTheme} + selectable={selectable} + isRowSelected={selectionState.selectedRows.has(child.id)} + onRowSelect={() => onRowSelect(child.id)} + onRowClick={onRowClick} + onDelete={handleDeleteClick} + expandIcon={expandIcon} + /> + {/* Recursively render nested children */} + {child.children && child.children.length > 0 && renderNestedRows(child.id, level + 1)} + )); }; diff --git a/src/components/TableCell.tsx b/src/components/TableCell.tsx index 1c18a46..dc5c4e5 100644 --- a/src/components/TableCell.tsx +++ b/src/components/TableCell.tsx @@ -108,14 +108,17 @@ export const TableCell: React.FC = ({ cell.render('Cell') ) : ( <> - {hasChildren ? ( + {/* Only show expand button in the first column when row has children */} + {index === 0 && hasChildren ? (
{expandIcon || }
- ) :
} + ) : index === 0 ? ( +
+ ) : null} {cell.render('Cell')} )} diff --git a/src/components/TableRow.tsx b/src/components/TableRow.tsx index 85bb0a7..f66c985 100644 --- a/src/components/TableRow.tsx +++ b/src/components/TableRow.tsx @@ -141,14 +141,19 @@ export const TableRow: React.FC = ({
)} -
- {expandIcon || ( - - )} -
+ {/* Only show expand button in the first column when row has children */} + {index === 0 && ( +
+ {hasChildren ? ( + expandIcon || ( + + ) + ) : null} +
+ )} {column.render ? column.render(displayValue, dataItem) diff --git a/src/styles/Pagination.css b/src/styles/Pagination.css index 2724134..763cdfe 100644 --- a/src/styles/Pagination.css +++ b/src/styles/Pagination.css @@ -92,14 +92,14 @@ .pagination-total-items { display: block; } -} - + } + /* Hide total items text on screens smaller than 798px */ @media (max-width: 797px) { .pagination-total-items { display: none; - } - +} + .pagination-container { min-width: 1200px; /* Maintain minimum width */ overflow-x: auto; /* Enable horizontal scroll */