@snowpact/react-tanstack-query-table 1.6.3 → 1.7.0

package/README.md

@@ -46,17 +46,17 @@ setupSnowTable({
 - **Dynamic keys** (column labels, etc.) - Your `translate` function handles these
 - **Static UI keys** (`dataTable.*`) - Built-in English defaults if `translate` returns the key unchanged
 
-| Key | Default |
-|-----|---------|
-| `dataTable.search` | "Search..." |
-| `dataTable.elements` | "elements" |
-| `dataTable.paginationSize` | "per page" |
-| `dataTable.columnsConfiguration` | "Columns" |
-| `dataTable.resetFilters` | "Reset filters" |
-| `dataTable.resetColumns` | "Reset" |
-| `dataTable.searchFilters` | "Search..." |
-| `dataTable.searchEmpty` | "No results found" |
-| `dataTable.selectFilter` | "Select..." |
+| Key                              | Default            |
+| -------------------------------- | ------------------ |
+| `dataTable.search`               | "Search..."        |
+| `dataTable.elements`             | "elements"         |
+| `dataTable.paginationSize`       | "per page"         |
+| `dataTable.columnsConfiguration` | "Columns"          |
+| `dataTable.resetFilters`         | "Reset filters"    |
+| `dataTable.resetColumns`         | "Reset"            |
+| `dataTable.searchFilters`        | "Search..."        |
+| `dataTable.searchEmpty`          | "No results found" |
+| `dataTable.selectFilter`         | "Select..."        |
 
 Override static keys without i18n:
 ```tsx
@@ -103,27 +103,47 @@ That's it! You have a working data table.
 
 ### Theme Customization
 
-Override CSS variables to match your design:
+Override CSS variables to match your design. Variables use `@property` so they won't override values you set before importing the styles.
 
 ```css
 :root {
-  --snow-background: #ffffff;
-  --snow-foreground: #0a0a0a;
-  --snow-secondary: #f5f5f5;
-  --snow-secondary-foreground: #737373;
-  --snow-border: #d4d4d4;
-  --snow-ring: #a3a3a3;
-  --snow-radius: 0.375rem;
+  /* Base colors */
+  --snow-table-background: #ffffff;
+  --snow-table-foreground: #0a0a0a;
+  --snow-table-border: #e5e5e5;        /* Table borders, row separators */
+  --snow-table-input-border: #e5e5e5;  /* Inputs, buttons, dropdowns */
+  --snow-table-active-ring: #a3a3a3;
+
+  /* UI-specific colors */
+  --snow-table-header: #f5f5f5;      /* Table headers, tab list */
+  --snow-table-hover: #f5f5f5;       /* Hover states */
+  --snow-table-skeleton: #f5f5f5;    /* Skeleton loader */
+  --snow-table-placeholder: #a3a3a3; /* Input placeholders */
+  --snow-table-muted: #737373;       /* Secondary text (counts, pagination, inactive tabs) */
+
+  /* Optional (transparent/inherited by default) */
+  --snow-table-row-even: #fafafa;         /* Alternating rows - zebra striping */
+  --snow-table-action-button: #f0f0f0;    /* Action button background */
+
+  /* Other */
+  --snow-table-radius: 0.375rem;
+  --snow-table-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
 }
 
-/* Dark mode */
+/* Dark mode example */
 .dark {
-  --snow-background: #1a1a2e;
-  --snow-foreground: #eaeaea;
-  --snow-secondary: #16213e;
-  --snow-secondary-foreground: #a0a0a0;
-  --snow-border: #0f3460;
-  --snow-ring: #3b82f6;
+  --snow-table-background: #1a1a2e;
+  --snow-table-foreground: #eaeaea;
+  --snow-table-border: #0f3460;
+  --snow-table-input-border: #0f3460;
+  --snow-table-active-ring: #3b82f6;
+  --snow-table-header: #16213e;
+  --snow-table-hover: #16213e;
+  --snow-table-skeleton: #16213e;
+  --snow-table-row-even: #1f1f3a;
+  --snow-table-placeholder: #6b7280;
+  --snow-table-muted: #a0a0a0;
+  --snow-table-action-button: #16213e;
 }
 ```
 
@@ -209,7 +229,7 @@ For API calls with built-in mutation handling:
   type: 'endpoint',
   icon: TrashIcon,
   label: 'Delete',
-  variant: 'danger',
+  className: 'my-danger-btn',  // Optional: add custom styling
   endpoint: (item) => api.deleteUser(item.id),
   onSuccess: () => {
     toast.success('User deleted');
@@ -228,7 +248,6 @@ Use `withConfirm` to show a confirmation dialog before the endpoint is called:
   type: 'endpoint',
   icon: TrashIcon,
   label: 'Delete',
-  variant: 'danger',
   endpoint: (item) => api.deleteUser(item.id),
   withConfirm: async (item) => {
     // Return true to proceed, false to cancel
@@ -419,14 +438,14 @@ const columns: SnowColumnConfig<User>[] = [
 
 #### SnowColumnMeta options
 
-| Option               | Type               | Description                                      |
-| -------------------- | ------------------ | ------------------------------------------------ |
-| `width`              | `string \| number` | Column width (e.g., `'200px'`, `'20%'`, `'auto'`) |
-| `minWidth`           | `string \| number` | Minimum column width                             |
-| `maxWidth`           | `string \| number` | Maximum column width                             |
+| Option               | Type               | Description                                               |
+| -------------------- | ------------------ | --------------------------------------------------------- |
+| `width`              | `string \| number` | Column width (e.g., `'200px'`, `'20%'`, `'auto'`)         |
+| `minWidth`           | `string \| number` | Minimum column width                                      |
+| `maxWidth`           | `string \| number` | Maximum column width                                      |
 | `defaultHidden`      | `boolean`          | Hide column by default (with `enableColumnConfiguration`) |
-| `disableColumnClick` | `boolean`          | Disable `onRowClick` for this column             |
-| `center`             | `boolean`          | Center column content                            |
+| `disableColumnClick` | `boolean`          | Disable `onRowClick` for this column                      |
+| `center`             | `boolean`          | Center column content                                     |
 
 ---