@toolbox-web/grid-react 0.8.1 → 0.10.0

package/README.md

@@ -14,6 +14,7 @@ React adapter for `@toolbox-web/grid` data grid component. Provides components a
 - ✅ **Declarative columns** - Define columns via props or `GridColumn` components
 - ✅ **Render props** - Clean `children` syntax for custom cells
 - ✅ **Type-level defaults** - App-wide renderers/editors via `GridTypeProvider`
+- ✅ **Icon configuration** - App-wide icon overrides via `GridProvider` or `GridIconProvider`
 - ✅ **Hooks API** - `useGrid` and `useGridEvent` for programmatic access
 - ✅ **Ref forwarding** - Access grid instance via `DataGridRef`
 - ✅ **Master-detail** - `GridDetailPanel` for expandable rows
@@ -534,6 +535,80 @@ function Dashboard() {
 | `useGridTypeDefaults()` | Get all type defaults from context |
 | `useTypeDefault(type)`  | Get defaults for a specific type   |
 
+## App-Wide Icon Configuration
+
+Customize grid icons at the application level using `GridIconProvider` or the combined `GridProvider`:
+
+### Using GridProvider (Recommended)
+
+```tsx
+import { GridProvider, DataGrid } from '@toolbox-web/grid-react';
+
+// Define icon overrides and type defaults together
+const icons = {
+  expand: '➕',
+  collapse: '➖',
+  sortAsc: '↑',
+  sortDesc: '↓',
+};
+
+const typeDefaults = {
+  country: { renderer: (ctx) => <span>🌍 {ctx.value}</span> },
+};
+
+function App() {
+  return (
+    <GridProvider icons={icons} defaults={typeDefaults}>
+      <Dashboard />
+    </GridProvider>
+  );
+}
+```
+
+### Using GridIconProvider (Icons Only)
+
+```tsx
+import { GridIconProvider, DataGrid } from '@toolbox-web/grid-react';
+
+const customIcons = {
+  expand: '▶',
+  collapse: '▼',
+  sortAsc: '△',
+  sortDesc: '▽',
+  filter: '<svg>...</svg>', // SVG markup supported
+};
+
+function App() {
+  return (
+    <GridIconProvider icons={customIcons}>
+      <DataGrid rows={data} columns={columns} />
+    </GridIconProvider>
+  );
+}
+```
+
+**Available Icons:**
+
+| Icon           | Default | Description                          |
+| -------------- | ------- | ------------------------------------ |
+| `expand`       | `▶`     | Expand icon for trees/groups/details |
+| `collapse`     | `▼`     | Collapse icon                        |
+| `sortAsc`      | `▲`     | Sort ascending indicator             |
+| `sortDesc`     | `▼`     | Sort descending indicator            |
+| `sortNone`     | `⇅`     | Unsorted indicator                   |
+| `filter`       | SVG     | Filter icon in headers               |
+| `filterActive` | SVG     | Filter icon when active              |
+| `submenuArrow` | `▶`     | Context menu submenu arrow           |
+| `dragHandle`   | `⋮⋮`    | Drag handle for reordering           |
+| `toolPanel`    | `☰`    | Tool panel toggle icon               |
+| `print`        | `🖨️`    | Print button icon                    |
+
+**Precedence (highest wins):**
+
+1. `gridConfig.icons` - Per-grid overrides
+2. `GridProvider`/`GridIconProvider` - App-level defaults
+3. Built-in defaults
+
 ## Using Plugins (Advanced)
 
 > **Note:** For most use cases, prefer the [declarative feature props](#enabling-features) approach above.
@@ -588,14 +663,16 @@ Inject custom CSS into the grid:
 
 ### Exported Components
 
-| Component          | Description                          |
-| ------------------ | ------------------------------------ |
-| `DataGrid`         | Main grid component wrapper          |
-| `GridColumn`       | Declarative column with render props |
-| `GridDetailPanel`  | Master-detail expandable panel       |
-| `GridToolPanel`    | Custom sidebar panel                 |
-| `GridToolButtons`  | Toolbar button container             |
-| `GridTypeProvider` | App-level type defaults context      |
+| Component          | Description                                 |
+| ------------------ | ------------------------------------------- |
+| `DataGrid`         | Main grid component wrapper                 |
+| `GridColumn`       | Declarative column with render props        |
+| `GridDetailPanel`  | Master-detail expandable panel              |
+| `GridToolPanel`    | Custom sidebar panel                        |
+| `GridToolButtons`  | Toolbar button container                    |
+| `GridProvider`     | Combined provider for icons & type defaults |
+| `GridTypeProvider` | App-level type defaults context             |
+| `GridIconProvider` | App-level icon overrides context            |
 
 ### Exported Hooks
 
@@ -605,6 +682,7 @@ Inject custom CSS into the grid:
 | `useGridEvent`          | Type-safe event subscription with cleanup |
 | `useGridTypeDefaults()` | Get all type defaults from context        |
 | `useTypeDefault(type)`  | Get defaults for a specific type          |
+| `useGridIcons()`        | Get icon overrides from context           |
 
 ### Exported Types
 
@@ -625,6 +703,9 @@ import type {
   ReactTypeDefault,
   TypeDefaultsMap,
   GridTypeProviderProps,
+  // Icon overrides
+  GridIconProviderProps,
+  GridProviderProps,
 } from '@toolbox-web/grid-react';
 ```
 

package/index.d.ts

@@ -9,6 +9,8 @@ export type { AllFeatureProps, FeatureProps, SSRProps } from './lib/feature-prop
 export type { ColumnShorthand } from './lib/column-shorthand';
 export type { EventHandler, EventProps } from './lib/event-props';
 export { GridTypeProvider, useGridTypeDefaults, useTypeDefault, type GridTypeProviderProps, type ReactTypeDefault, type TypeDefaultsMap, } from './lib/grid-type-registry';
+export { GridIconProvider, useGridIcons, type GridIconProviderProps } from './lib/grid-icon-registry';
+export { GridProvider, type GridProviderProps } from './lib/grid-provider';
 export type { ReactColumnConfig, ReactGridConfig } from './lib/react-column-config';
 export { useGrid, type ExportMethods, type SelectionMethods, type UseGridReturn } from './lib/use-grid';
 export { useGridEvent } from './lib/use-grid-event';

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../libs/grid-react/src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAGH,OAAO,YAAY,CAAC;AAGpB,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,YAAY,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,KAAK,kBAAkB,EAAE,KAAK,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC9G,OAAO,EACL,kBAAkB,EAClB,KAAK,uBAAuB,EAC5B,KAAK,qBAAqB,GAC3B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACpF,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,KAAK,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAGtG,YAAY,EAAE,eAAe,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAGnF,YAAY,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAG9D,YAAY,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAGlE,OAAO,EACL,gBAAgB,EAChB,mBAAmB,EACnB,cAAc,EACd,KAAK,qBAAqB,EAC1B,KAAK,gBAAgB,EACrB,KAAK,eAAe,GACrB,MAAM,0BAA0B,CAAC;AAGlC,YAAY,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAGpF,OAAO,EAAE,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,gBAAgB,EAAE,KAAK,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACxG,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAGpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAG5D,YAAY,EAAE,eAAe,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../libs/grid-react/src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAGH,OAAO,YAAY,CAAC;AAGpB,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,YAAY,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,KAAK,kBAAkB,EAAE,KAAK,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC9G,OAAO,EACL,kBAAkB,EAClB,KAAK,uBAAuB,EAC5B,KAAK,qBAAqB,GAC3B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACpF,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,KAAK,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAGtG,YAAY,EAAE,eAAe,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAGnF,YAAY,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAG9D,YAAY,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAGlE,OAAO,EACL,gBAAgB,EAChB,mBAAmB,EACnB,cAAc,EACd,KAAK,qBAAqB,EAC1B,KAAK,gBAAgB,EACrB,KAAK,eAAe,GACrB,MAAM,0BAA0B,CAAC;AAGlC,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,KAAK,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAGtG,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAG3E,YAAY,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAGpF,OAAO,EAAE,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,gBAAgB,EAAE,KAAK,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACxG,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAGpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAG5D,YAAY,EAAE,eAAe,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC"}