\n```\n\nThe theme customization allows you to:\n- **Global Colors**: Customize background, primary, text, and border colors\n- **Table Components**: Style headers, cells, and rows with custom colors and borders\n- **Nested Levels**: Configure different background colors for each nesting level\n- **Filter Components**: Customize filter dropdowns, inputs, and focus states\n- **Pagination**: Style pagination buttons, selects, and info text\n- **Icons**: Customize expand, sort, and action icon colors\n- **Responsive Design**: All theme properties support responsive breakpoints\n- **CSS Variables**: Theme properties can use CSS custom properties for dynamic theming\n\n## 4. Component Features and Customization\n\n### 4.1 MultiLevelTable Component\n- **Hierarchical Data**: Supports unlimited nesting levels with automatic indentation\n- **Responsive Design**: Percentage-based column widths with fixed table layout\n- **Performance Optimized**: Virtual scrolling support for large datasets\n- **Accessibility**: ARIA labels, keyboard navigation, and screen reader support\n- **Customizable Icons**: Replace default expand, sort, and action icons\n- **Event Handling**: Comprehensive callback system for all user interactions\n\n### 4.2 TableRow Component\n- **Level-based Styling**: Different background colors for each nesting level\n- **Expand/Collapse**: Smooth animations for row expansion and collapse\n- **Selection State**: Visual feedback for selected rows\n- **Click Handlers**: Support for row click and action button clicks\n- **Custom Rendering**: Flexible cell content rendering with custom components\n\n### 4.3 TableCell Component\n- **Flexible Content**: Support for text, numbers, custom components, and HTML\n- **Alignment Options**: Left, center, and right text alignment\n- **Custom Styling**: Inline styles and CSS classes for individual cells\n- **Icon Integration**: Built-in support for expand, sort, and action icons\n- **Responsive Behavior**: Automatic text truncation and ellipsis\n\n### 4.4 TableHeader Component\n- **Sortable Columns**: Click-to-sort functionality with custom sort icons\n- **Filter Integration**: Dropdown filters with multi-select capability\n- **Custom Styling**: Theme-based header styling with hover effects\n- **Accessibility**: Proper ARIA labels and keyboard navigation\n- **Responsive Design**: Adaptive header layout for mobile devices\n\n### 4.5 Pagination Component\n- **Page Navigation**: Previous/next buttons with page number display\n- **Page Size Selection**: Dropdown to change items per page\n- **Custom Rendering**: Complete pagination component replacement\n- **State Management**: Automatic page state handling\n- **Responsive Layout**: Mobile-friendly pagination controls\n\n### 4.6 Filter Components\n- **Dropdown Filters**: Multi-select dropdown with search capability\n- **Global Search**: Real-time search across all columns\n- **Filter State**: Persistent filter state across pagination\n- **Custom Options**: Configurable filter options per column\n- **Outside Click**: Automatic dropdown closure on outside clicks\n\n### 4.7 Export Components\n- **Multiple Formats**: CSV, Excel, and JSON export support\n- **Custom Handlers**: Flexible export function customization\n- **Data Filtering**: Export only visible or selected data\n- **Progress Feedback**: Export progress indicators\n- **Error Handling**: Comprehensive error handling for export operations\n\n## 5. Development\n\n### 4.1 Project Structure\n- `src/App.tsx` - A demo component that showcases the MultiLevelTable with sample data\n- `src/main.tsx` - The entry point for the development environment\n- `src/index.css` - Basic styling for the table component\n- `src/components/` - All table components (MultiLevelTable, TableRow, TableCell, etc.)\n- `src/styles/` - CSS files for styling individual components\n- `src/types/` - TypeScript type definitions\n- `src/constants/` - Theme and configuration constants\n- `example/` - Complete example application with all features\n\n### 4.2 Development Commands\n```bash\n# Start the development server\nnpm run dev\n\n# Build the package\nnpm run build\n\n# Run linting\nnpm run lint\n```\n\n### 4.3 Development Features\n- **Hot Module Replacement (HMR)**: Instant feedback during development\n- **TypeScript Support**: Full type checking and IntelliSense support\n- **ESLint Configuration**: Code quality and consistency enforcement\n- **Sample Data**: Comprehensive test data with nested structures\n- **Component Testing**: Unit tests for all major components\n- **Responsive Design**: Mobile-first responsive design patterns\n- **Accessibility**: ARIA labels and keyboard navigation support\n- **Performance**: Optimized rendering with React.memo and useMemo\n\n## 6. Example\n\nHere's a complete example showing how to use the component with all features enabled:\n\n```tsx\nimport React from 'react';\nimport { MultiLevelTable } from '@anitta-kv/material-table-component';\n\nfunction App() {\n const data = [\n {\n id: 1,\n name: 'Parent 1',\n value: 100,\n status: 'active',\n children: [\n {\n id: 2,\n name: 'Child 1',\n value: 50,\n status: 'pending',\n },\n {\n id: 3,\n name: 'Child 2',\n value: 50,\n status: 'completed',\n },\n ],\n },\n ];\n\n const columns = [\n {\n key: 'name',\n title: 'Name',\n filterable: true,\n },\n {\n key: 'value',\n title: 'Value',\n filterable: true,\n render: (value) => `$${value}`,\n },\n {\n key: 'status',\n title: 'Status',\n filterable: true,\n render: (value) => (\n \n {value}\n \n ),\n },\n ];\n\n const theme = {\n colors: {\n background: '#ffffff',\n primaryColor: '#1976d2',\n textColor: '#333333',\n borderColor: '#e0e0e0'\n },\n table: {\n header: {\n background: '#f5f5f5',\n textColor: '#333333',\n borderColor: '#e0e0e0'\n },\n cell: {\n textColor: '#333333',\n borderColor: '#e0e0e0'\n },\n row: {\n levelColors: [\n { background: '#ffffff' },\n { background: '#f8f8f8' },\n { background: '#f5f5f5' }\n ]\n }\n }\n };\n\n return (\n \n {\n console.log('Selected rows:', selectedRows);\n }}\n onRowClick={(row) => {\n console.log('Row clicked:', row);\n }}\n onDelete={(rowId, rowName) => {\n console.log('Delete row:', rowId, rowName);\n }}\n />\n
\n );\n}\n\nexport default App;\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md"}