diff --git a/README.md b/README.md index 47a7f69..60f8ba8 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,10 @@ # React Multi Level Table +
+ +Multi Level Table Component Example +
+ ## Table of Contents - [Overview](#overview) @@ -144,33 +149,33 @@ The MultiLevelTable component accepts the following props: | selectable | boolean | No | false | Enable/disable row selection | #### 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 | +| Prop | Type | Required | Default | Description | +|------|------|----------|---------|-------------| +| selectionState | SelectionState | No | { selectedRows: new Set(), isAllSelected: false } | Current selection state with selected rows and all selected flag | +| searchTerm | string | No | '' | Current search term for filtering data | +| selectedFilterValues | Set | No | new Set() | Currently selected filter values | +| deletePopup | object | No | { isOpen: false, itemId: null, itemName: '' } | Delete confirmation popup state (isOpen, itemId, itemName) | +| bulkDeletePopup | object | No | { isOpen: false, selectedCount: 0 } | Bulk delete confirmation popup state (isOpen, selectedCount) | +| openDropdowns | Set | No | new Set() | Set of currently open dropdown IDs | +| expandedRows | Set | No | new Set() | 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 | +| Prop | Type | Required | Default | Description | +|------|------|----------|---------|-------------| +| onSearchChange | (searchTerm: string) => void | No | - | Updates the search term for filtering data | +| onFilterChange | (values: Set) => void | No | - | Updates the selected filter values | +| onDeleteClick | (itemId: string \| number, itemName: string) => void | No | - | Handles delete button click for a specific row | +| onDeleteConfirm | () => void | No | - | Confirms the delete action for the selected row | +| onDeleteCancel | () => void | No | - | Cancels the delete action and closes popup | +| onBulkDeleteClick | () => void | No | - | Handles bulk delete button click for selected rows | +| onBulkDeleteConfirm | () => void | No | - | Confirms the bulk delete action for selected rows | +| onBulkDeleteCancel | () => void | No | - | Cancels the bulk delete action and closes popup | +| onDropdownToggle | (buttonId: string, isOpen: boolean) => void | No | - | Toggles dropdown open/close state for action buttons | +| onDropdownClose | (buttonId: string) => void | No | - | Closes a specific dropdown by ID | +| onButtonClick | (button: ButtonConfig) => void | No | - | Handles click events for action buttons (export, filter, etc.) | +| onSelectAll | () => void | No | - | Handles select all checkbox click to select/deselect all rows | +| onRowSelect | (rowId: string \| number) => void | No | - | Handles individual row selection checkbox click | +| onRowToggle | (rowId: string \| number) => void | No | - | Handles row expand/collapse toggle for nested rows | #### Additional Props | Prop | Type | Default | Description | @@ -356,6 +361,7 @@ interface PaginationProps { previousPage: () => void; // Go to previous page setPageSize: (pageSize: number) => void; // Change page size state: TableStateWithPagination; // Current table state + theme?: ThemeProps; // Optional theme for styling } ``` diff --git a/example/src/components/DetailRow.tsx b/example/src/components/DetailRow.tsx index 0371c3c..4a0b66c 100644 --- a/example/src/components/DetailRow.tsx +++ b/example/src/components/DetailRow.tsx @@ -5,7 +5,7 @@ import type { ThemeProps } from '../types/theme'; interface DetailRowProps { label: string; value: React.ReactNode; - theme: ThemeProps; + theme?: ThemeProps; } export const DetailRow: React.FC = ({ label, value, theme }) => ( @@ -13,7 +13,7 @@ export const DetailRow: React.FC = ({ label, value, theme }) => {label} @@ -21,7 +21,7 @@ export const DetailRow: React.FC = ({ label, value, theme }) =>
{value} diff --git a/example/src/components/ExportDropdown.tsx b/example/src/components/ExportDropdown.tsx index 09c57ee..6ccc7c8 100644 --- a/example/src/components/ExportDropdown.tsx +++ b/example/src/components/ExportDropdown.tsx @@ -4,7 +4,7 @@ import { colors } from '../styles/style'; import '../styles/ExportDropdown.css'; interface ExportDropdownProps { - onClose: () => void; + onClose?: () => void; handleExportCSV?: () => void; theme?: { colors?: { @@ -24,7 +24,7 @@ export const ExportDropdown: React.FC = ({ useEffect(() => { const handleClickOutside = (event: MouseEvent) => { if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) - onClose(); + onClose?.(); }; document.addEventListener('mousedown', handleClickOutside); @@ -36,7 +36,7 @@ export const ExportDropdown: React.FC = ({ if (handleExportCSV) handleExportCSV(); - onClose(); + onClose?.(); }; return ( diff --git a/example/src/components/FilterDropdown.tsx b/example/src/components/FilterDropdown.tsx index b7f7f60..ddd2943 100644 --- a/example/src/components/FilterDropdown.tsx +++ b/example/src/components/FilterDropdown.tsx @@ -5,23 +5,23 @@ import '../styles/FilterDropdown.css'; interface FilterDropdownProps { // State props - tempSelectedValues: Set; - selectedCategory: string | null; - categories: Array<{ + tempSelectedValues?: Set; + selectedCategory?: string | null; + categories?: Array<{ key: string; title: string; count: number; }>; - categoryFilterOptions: FilterOption[]; + categoryFilterOptions?: FilterOption[]; // Handler props - onClose: () => void; - onApply: (values: Set) => void; - onCancel: () => void; - onReset: () => void; - onCategoryChange: (categoryKey: string) => void; - onSelectAll: () => void; - onOptionChange: (value: string | number) => void; + onClose?: () => void; + onApply?: (values: Set) => void; + onCancel?: () => void; + onReset?: () => void; + onCategoryChange?: (categoryKey: string) => void; + onSelectAll?: () => void; + onOptionChange?: (value: string | number) => void; // Configuration props title?: string; @@ -48,10 +48,10 @@ interface FilterDropdownProps { export const FilterDropdown: React.FC = ({ // State props - tempSelectedValues, - selectedCategory, - categories, - categoryFilterOptions, + tempSelectedValues = new Set(), + selectedCategory = null, + categories = [], + categoryFilterOptions = [], // Handler props onClose, @@ -80,7 +80,7 @@ export const FilterDropdown: React.FC = ({ useEffect(() => { const handleClickOutside = (event: MouseEvent) => { if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) - onClose(); + onClose?.(); }; document.addEventListener('mousedown', handleClickOutside); @@ -91,17 +91,17 @@ export const FilterDropdown: React.FC = ({ }, [onClose]); const handleApply = () => { - onApply(tempSelectedValues); - onClose(); + onApply?.(tempSelectedValues); + onClose?.(); }; const handleCancel = () => { - onCancel(); - onClose(); + onCancel?.(); + onClose?.(); }; const handleResetFilters = () => { - onReset(); + onReset?.(); }; return ( @@ -169,7 +169,7 @@ export const FilterDropdown: React.FC = ({
onCategoryChange(category.key)} + onClick={() => onCategoryChange?.(category.key)} style={{ cursor: 'pointer', backgroundColor: isSelected ? '#F3F3FF' : 'transparent', @@ -209,7 +209,7 @@ export const FilterDropdown: React.FC = ({ ref={(input) => { if (input) input.indeterminate = isIndeterminate; }} - onChange={onSelectAll} + onChange={() => onSelectAll?.()} style={{ borderColor: theme?.table?.filter?.borderColor || '#E5E7EB', }} @@ -238,7 +238,7 @@ export const FilterDropdown: React.FC = ({ onOptionChange(option.value)} + onChange={() => onOptionChange?.(option.value)} style={{ borderColor: theme?.table?.filter?.borderColor || '#E5E7EB', }} diff --git a/example/src/components/Popup.tsx b/example/src/components/Popup.tsx index 5bd2031..d7b0154 100644 --- a/example/src/components/Popup.tsx +++ b/example/src/components/Popup.tsx @@ -6,18 +6,18 @@ import '../styles/Popup.css'; interface PopupButton { text: string; - onClick: () => void; + onClick?: () => void; variant?: 'primary' | 'secondary'; disabled?: boolean; } interface PopupProps { isOpen: boolean; - onClose: () => void; - icon: React.ComponentType<{ width?: number; height?: number }>; + onClose?: () => void; + icon?: React.ComponentType<{ width?: number; height?: number }>; title?: string; - text: string; - buttons: PopupButton[]; + text?: string; + buttons?: PopupButton[]; theme?: ThemeProps; } @@ -27,7 +27,7 @@ export const Popup: React.FC = ({ icon: Icon, title, text, - buttons, + buttons = [], theme, }) => { const popupRef = useRef(null); @@ -35,12 +35,12 @@ export const Popup: React.FC = ({ useEffect(() => { const handleClickOutside = (event: MouseEvent) => { if (popupRef.current && !popupRef.current.contains(event.target as Node)) - onClose(); + onClose?.(); }; const handleEscapeKey = (event: KeyboardEvent) => { if (event.key === 'Escape') - onClose(); + onClose?.(); }; if (isOpen) { @@ -57,7 +57,7 @@ export const Popup: React.FC = ({ }, [isOpen, onClose]); const renderIcon = () => { - return ; + return Icon ? : null; }; if (!isOpen) return null; @@ -84,9 +84,11 @@ export const Popup: React.FC = ({
-

- {text} -

+ {text && ( +

+ {text} +

+ )}
@@ -99,11 +101,11 @@ export const Popup: React.FC = ({ style={{ backgroundColor: button.variant === 'primary' ? (theme?.colors?.primaryColor || colors.primary) - : (theme?.colors?.background || colors.backgroundWhite), + : 'transparent', color: button.variant === 'primary' ? '#ffffff' : (theme?.colors?.textColor || colors.borderDark), - borderColor: theme?.colors?.borderColor || colors.borderDark, + borderColor: theme?.colors?.borderColor || colors.borderFilter, }} > {button.text} diff --git a/example/src/components/RowDetailsPopup.tsx b/example/src/components/RowDetailsPopup.tsx index 7d5181b..d4d1e72 100644 --- a/example/src/components/RowDetailsPopup.tsx +++ b/example/src/components/RowDetailsPopup.tsx @@ -8,9 +8,9 @@ import '../styles/RowDetailsPopup.css'; interface RowDetailsPopupProps { isOpen: boolean; - onClose: () => void; + onClose?: () => void; item: DataItem | null; - theme: ThemeProps; + theme?: ThemeProps; } export const RowDetailsPopup: React.FC = ({ @@ -80,20 +80,20 @@ export const RowDetailsPopup: React.FC = ({
{/* Header */}

Resource Details @@ -102,7 +102,7 @@ export const RowDetailsPopup: React.FC = ({ onClick={onClose} className="row-details-popup-close-button" style={{ - color: theme.colors?.textColor || '#333333', + color: theme?.colors?.textColor || '#333333', }} > × @@ -125,7 +125,7 @@ export const RowDetailsPopup: React.FC = ({ {item.id} @@ -170,7 +170,7 @@ export const RowDetailsPopup: React.FC = ({ {item.children.length} item{item.children.length !== 1 ? 's' : ''} @@ -196,15 +196,15 @@ export const RowDetailsPopup: React.FC = ({
{/* Page Numbers */} @@ -208,14 +220,15 @@ export const Pagination: React.FC = ({
@@ -223,12 +236,14 @@ export const Pagination: React.FC = ({
{pageSize} / page - +