all-purpose-table 1.0.10 → 1.1.0

package/README.md

@@ -1,6 +1,6 @@
 # All Purpose Table
 
-A production-grade, plug-and-play React table component with TypeScript support and zero dependencies.
+Plug-and-play React table component with TypeScript support and zero dependencies.
 
 Demos can be found at: https://apt-demos.vercel.app/
 
@@ -73,6 +73,11 @@ function App() {
 | `renderFullRow`               | `(row) => ReactNode` | `undefined`     | Render function for custom full-width rows (can be used as header/dropdown row) |
 | `mobileAutoSizeOnHeaderClick` | `boolean`            | `false`         | Enable mobile auto-sizing on header click                                       |
 | `mobileBreakpoint`            | `number`             | `768`           | Mobile breakpoint in pixels                                                     |
+| `filterable`                  | `boolean`            | `false`         | Enable the Excel-style filter dropdown on every column (opt-in)                 |
+| `striped`                     | `boolean`            | `false`         | Zebra striping — every other row gets a subtle darker background                |
+| `dividers`                    | `boolean`            | `false`         | Horizontal divider line beneath each row                                        |
+| `bordered`                    | `boolean`            | `false`         | Vertical divider lines between columns (grid look)                              |
+| `density`                     | `"default" \| "compact"` | `"default"` | Row/cell padding density                                                        |
 
 ### TableHeader Interface
 
@@ -81,6 +86,7 @@ interface TableHeader {
   accessor: string; // Key to access data in row object
   label: string; // Display label for column
   isSortable?: boolean; // Enable sorting for this column
+  isFilterable?: boolean; // Override the table `filterable` prop for this column
   width?: string | number; // Initial column width
   minWidth?: string | number; // Minimum column width
   cellRenderer?: (args: {
@@ -91,6 +97,31 @@ interface TableHeader {
 }
 ```
 
+### Column Filtering
+
+Set `filterable` on the table to add an Excel-style filter dropdown to every column. Each dropdown offers sort (asc/desc), a search box, and a checklist of the column's distinct values:
+
+```tsx
+<Table manualHeaders={headers} manualRowData={data} filterable />
+```
+
+The search box does double duty: it filters the rows by substring **and** narrows the value checklist. `isFilterable` on an individual column overrides the table-level default (set it to `false` to exclude a column, or `true` to enable just one column while `filterable` is off).
+
+### Style Options
+
+Base styling is professional by default; these boolean props toggle common variations (they compose freely):
+
+```tsx
+<Table
+  manualHeaders={headers}
+  manualRowData={data}
+  striped        // alternating row backgrounds
+  dividers       // horizontal line under each row
+  bordered       // vertical lines between columns
+  density="compact" // tighter padding
+/>
+```
+
 ## 🔩 Advanced Usage
 
 ### Custom Cell Renderers

package/dist/index.d.mts

@@ -2,6 +2,11 @@ interface TableHeader {
     accessor: string;
     label: string;
     isSortable?: boolean;
+    /**
+     * Enable the Excel-style filter dropdown for this column. When omitted, the
+     * column inherits the table-level `filterable` prop.
+     */
+    isFilterable?: boolean;
     width?: string | number;
     minWidth?: string | number;
     cellRenderer?: (args: {
@@ -13,6 +18,7 @@ interface SortConfig {
     key: string;
     direction: "asc" | "desc";
 }
+type TableDensity = "default" | "compact";
 interface TableProps {
     manualHeaders: TableHeader[];
     manualRowData: Record<string, any>[];
@@ -32,6 +38,16 @@ interface TableProps {
     expandedRowId?: string | null;
     renderExpandedRow?: (row: any) => React.ReactNode;
     renderFullRow?: (row: any) => React.ReactNode;
+    /** Enable Excel-style per-column filtering on every column (opt-in). */
+    filterable?: boolean;
+    /** Zebra striping: give every other row a subtle darker background. */
+    striped?: boolean;
+    /** Draw a horizontal divider line beneath each row. */
+    dividers?: boolean;
+    /** Draw vertical divider lines between columns (grid look). */
+    bordered?: boolean;
+    /** Row/cell density. `"compact"` tightens padding for dense data. */
+    density?: TableDensity;
 }
 declare const Table: React.FC<TableProps>;
 
@@ -47,4 +63,18 @@ interface ColumnVisibilityToggleProps {
 }
 declare const ColumnVisibilityToggle: React.FC<ColumnVisibilityToggleProps>;
 
-export { type ColumnDefinition, ColumnVisibilityToggle, type ColumnVisibilityToggleProps, type SortConfig, Table, type TableHeader, type TableProps };
+interface ColumnFilterProps {
+    columnKey: string;
+    label: string;
+    distinctValues: string[];
+    search: string;
+    excluded: Set<string>;
+    sortConfig: SortConfig | null;
+    isSortable?: boolean;
+    onSort: (direction: "asc" | "desc") => void;
+    onSearchChange: (value: string) => void;
+    onExcludedChange: (next: Set<string>) => void;
+    onClear: () => void;
+}
+
+export { type ColumnDefinition, type ColumnFilterProps, ColumnVisibilityToggle, type ColumnVisibilityToggleProps, type SortConfig, Table, type TableDensity, type TableHeader, type TableProps };

package/dist/index.d.ts

@@ -2,6 +2,11 @@ interface TableHeader {
     accessor: string;
     label: string;
     isSortable?: boolean;
+    /**
+     * Enable the Excel-style filter dropdown for this column. When omitted, the
+     * column inherits the table-level `filterable` prop.
+     */
+    isFilterable?: boolean;
     width?: string | number;
     minWidth?: string | number;
     cellRenderer?: (args: {
@@ -13,6 +18,7 @@ interface SortConfig {
     key: string;
     direction: "asc" | "desc";
 }
+type TableDensity = "default" | "compact";
 interface TableProps {
     manualHeaders: TableHeader[];
     manualRowData: Record<string, any>[];
@@ -32,6 +38,16 @@ interface TableProps {
     expandedRowId?: string | null;
     renderExpandedRow?: (row: any) => React.ReactNode;
     renderFullRow?: (row: any) => React.ReactNode;
+    /** Enable Excel-style per-column filtering on every column (opt-in). */
+    filterable?: boolean;
+    /** Zebra striping: give every other row a subtle darker background. */
+    striped?: boolean;
+    /** Draw a horizontal divider line beneath each row. */
+    dividers?: boolean;
+    /** Draw vertical divider lines between columns (grid look). */
+    bordered?: boolean;
+    /** Row/cell density. `"compact"` tightens padding for dense data. */
+    density?: TableDensity;
 }
 declare const Table: React.FC<TableProps>;
 
@@ -47,4 +63,18 @@ interface ColumnVisibilityToggleProps {
 }
 declare const ColumnVisibilityToggle: React.FC<ColumnVisibilityToggleProps>;
 
-export { type ColumnDefinition, ColumnVisibilityToggle, type ColumnVisibilityToggleProps, type SortConfig, Table, type TableHeader, type TableProps };
+interface ColumnFilterProps {
+    columnKey: string;
+    label: string;
+    distinctValues: string[];
+    search: string;
+    excluded: Set<string>;
+    sortConfig: SortConfig | null;
+    isSortable?: boolean;
+    onSort: (direction: "asc" | "desc") => void;
+    onSearchChange: (value: string) => void;
+    onExcludedChange: (next: Set<string>) => void;
+    onClear: () => void;
+}
+
+export { type ColumnDefinition, type ColumnFilterProps, ColumnVisibilityToggle, type ColumnVisibilityToggleProps, type SortConfig, Table, type TableDensity, type TableHeader, type TableProps };