@moontra/moonui-pro 2.25.8 → 2.25.10

package/README.md

@@ -9,7 +9,7 @@ Premium React components for advanced web applications. MoonUI Pro extends the b
 ## ✨ What's Included
 
 ### 📊 **Data & Analytics**
-- **Advanced DataTable** - Virtualized tables with sorting, filtering, pagination, row selection
+- **Advanced DataTable** - Enterprise-grade tables with quick filters, faceted filters, enum auto-detection, custom filter accessors, virtualization, sorting, pagination, row selection, and export functionality
 - **Charts Library** - Beautiful data visualizations with Recharts integration
 - **Dashboard Widgets** - KPI cards, metrics displays, and analytics components
 - **TreeView** - Hierarchical data display with drag & drop
@@ -158,20 +158,101 @@ import { DataTable, VirtualTable, TreeTable } from '@moontra/moonui-pro';
 // Advanced data table with all features
 <DataTable
   data={data}
-  columns={columns}
+  columns={[
+    {
+      accessorKey: 'status',
+      header: 'Status',
+      cell: ({ row }) => <Badge>{row.getValue('status')}</Badge>,
+      meta: {
+        filterType: 'select',
+        filterOptions: ['Active', 'Pending', 'Completed'],
+        filterValueAccessor: (row) => row.status // Access raw data, not rendered Badge
+      }
+    },
+    {
+      accessorKey: 'name',
+      header: 'Name'
+    }
+  ]}
+  quickFilters={[
+    {
+      column: 'status',
+      label: 'Status',
+      options: 'auto', // Auto-detect from data
+      showCounts: true // Show count for each option
+    },
+    {
+      column: 'department',
+      label: 'Department',
+      multi: true // Multi-select
+    }
+  ]}
+  facetedFilters={['category', 'tags']} // Checkbox filters with counts
   features={{
     sorting: true,
     filtering: true,
     pagination: true,
     rowSelection: true,
     columnResizing: true,
-    virtualScrolling: true
+    virtualScrolling: true,
+    export: ['csv', 'excel', 'json']
   }}
   onRowClick={handleRowClick}
   onSelectionChange={handleSelection}
 />
 ```
 
+#### New Filter Features (v2.25.8+)
+
+**Quick Filters** - Dropdown filters for common filter scenarios:
+```jsx
+// Quick filter with auto-detection
+<DataTable
+  quickFilters={[
+    {
+      column: 'status',
+      options: 'auto', // Automatically detects unique values from data
+      showCounts: true  // Shows count next to each option
+    }
+  ]}
+/>
+```
+
+**Faceted Filters** - Advanced checkbox filters with search:
+```jsx
+// Faceted filters for categories
+<DataTable
+  facetedFilters={['category', 'brand', 'tags']}
+  columns={[
+    {
+      accessorKey: 'category',
+      meta: {
+        filterType: 'select',
+        filterOptions: ['Electronics', 'Clothing', 'Books'] // Predefined options
+      }
+    }
+  ]}
+/>
+```
+
+**Filter Value Accessor** - Handle custom rendered cells:
+```jsx
+// Filter by raw data instead of rendered content
+columns={[
+  {
+    accessorKey: 'status',
+    cell: ({ row }) => (
+      <Badge variant={getVariant(row.original.status)}>
+        {formatStatus(row.original.status)}
+      </Badge>
+    ),
+    meta: {
+      filterValueAccessor: (row) => row.status // Access raw status value
+    }
+  }
+]}
+```
+
 ### Charts & Visualizations
 ```jsx
 import { LineChart, BarChart, PieChart, ScatterChart } from '@moontra/moonui-pro';
@@ -349,6 +430,22 @@ import { ResponsiveDataTable } from '@moontra/moonui-pro';
 />
 ```
 
+## 📦 Version History
+
+### v2.25.8 (Latest)
+- ✨ **New:** Quick Filters - Dropdown filters with auto-detection and counts
+- ✨ **New:** Faceted Filters - Advanced checkbox filters with search
+- ✨ **New:** Filter Value Accessor - Custom accessors for filtered data
+- ✨ **New:** Enum/Select filter support in filter drawer
+- 🐛 **Fixed:** Filter drawer z-index and stacking issues
+- 🐛 **Fixed:** Sorting behavior (single-column, three-state)
+
+### v2.25.0
+- 🚀 DataTable performance improvements
+- ✨ Export functionality (CSV, Excel, JSON)
+- ✨ Bulk actions support
+- 🎨 Improved dark mode styling
+
 ## 🔐 License & Security
 
 ### License Validation

package/dist/index.d.ts

@@ -3165,6 +3165,7 @@ interface DataTableProps<TData, TValue> {
     selectable?: boolean;
     pagination?: boolean;
     pageSize?: number;
+    pageSizeOptions?: number[];
     className?: string;
     onRowSelect?: (rows: TData[]) => void;
     onExport?: (data: TData[]) => void;
@@ -3223,7 +3224,7 @@ interface DataTableProps<TData, TValue> {
         filterButton?: string;
     };
 }
-declare function DataTable<TData, TValue>({ columns: originalColumns, data, searchable, filterable, exportable, selectable, pagination, pageSize, className, onRowSelect, onExport, enableExpandable, renderSubComponent, expandedRows: controlledExpandedRows, onRowExpandChange, bulkActions, quickFilters, facetedFilters, features, theme, texts, enableSorting, enableFiltering, enablePagination, enableColumnVisibility, enableRowSelection, filterPlaceholder, defaultPageSize, manualPagination, pageCount, onPaginationChange, onSortingChange, onColumnFiltersChange, state: externalState, }: DataTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;
+declare function DataTable<TData, TValue>({ columns: originalColumns, data, searchable, filterable, exportable, selectable, pagination, pageSize, pageSizeOptions, className, onRowSelect, onExport, enableExpandable, renderSubComponent, expandedRows: controlledExpandedRows, onRowExpandChange, bulkActions, quickFilters, facetedFilters, features, theme, texts, enableSorting, enableFiltering, enablePagination, enableColumnVisibility, enableRowSelection, filterPlaceholder, defaultPageSize, manualPagination, pageCount, onPaginationChange, onSortingChange, onColumnFiltersChange, state: externalState, }: DataTableProps<TData, TValue>): react_jsx_runtime.JSX.Element;
 /**
  * Helper function to create an expandable column
  * @param expandedRows - Set of expanded row IDs