@insticc/react-datagrid-2 1.1.28 → 1.1.30

package/README.md

@@ -340,6 +340,53 @@ actions={[
 ]}
 ```
 
+#### `filterActions`
+- **Type:** `Array<FilterActionObject>`
+- **Default:** `null`
+- **Description:** Array of toggle filter action buttons displayed in the toolbar for showing/hiding data based on filters
+- **Filter Action Object Properties:**
+  - `name` (string): Button label
+  - `function` (function, required): Callback when button is toggled - receives current state
+  - `state` (boolean): Current filter state (true = filter active/hidden, false = filter inactive/shown)
+  - `key` (string): Unique React key (defaults to name)
+  - `tooltip` (string): Tooltip text on hover
+  - `disabled` (boolean): Manually disable the button
+  - `visible` (boolean): Show/hide the button (default: true)
+- **Button Appearance:**
+  - When `state=true`: Orange color with eye-slash icon (items hidden)
+  - When `state=false`: Green color with eye icon (items shown)
+- **Example:**
+```jsx
+const [hideCompleted, setHideCompleted] = useState(false);
+const [hideArchived, setHideArchived] = useState(true);
+
+filterActions={[
+  {
+    name: 'Completed',
+    state: hideCompleted,
+    function: () => setHideCompleted(!hideCompleted),
+    tooltip: 'Toggle completed items visibility',
+    key: 'filter-completed'
+  },
+  {
+    name: 'Archived',
+    state: hideArchived,
+    function: () => setHideArchived(!hideArchived),
+    tooltip: 'Toggle archived items visibility',
+    disabled: false,
+    visible: true
+  },
+  {
+    // Dynamic button text based on state
+    state: hideEvents,
+    name: hideEvents ? "Hiding Events" : "Showing Events",
+    tooltip: hideEvents ? "Show Events" : "Hide Events",
+    function: () => setHideEvents(!hideEvents),
+    visible: !!handleHideEvents,  // Only show if handler exists
+  }
+]}
+```
+
 #### `extraActions`
 - **Type:** `Array<ExtraActionObject>`
 - **Default:** `null`
@@ -1089,6 +1136,68 @@ function ProductGrid() {
 }
 ```
 
+### Example 3.5: Grid with Filter Actions
+```jsx
+function TaskGrid() {
+  const [tasks, setTasks] = useState(initialTasks);
+  const [selected, setSelected] = useState([]);
+  const [hideCompleted, setHideCompleted] = useState(false);
+  const [hideArchived, setHideArchived] = useState(true);
+
+  // Filter data based on filter states
+  const filteredTasks = useMemo(() => {
+    return tasks.filter(task => {
+      if (hideCompleted && task.status === 'completed') return false;
+      if (hideArchived && task.isArchived) return false;
+      return true;
+    });
+  }, [tasks, hideCompleted, hideArchived]);
+
+  const filterActions = [
+    {
+      name: 'Completed',
+      state: hideCompleted,
+      function: () => setHideCompleted(!hideCompleted),
+      tooltip: hideCompleted ? 'Show completed tasks' : 'Hide completed tasks',
+      key: 'filter-completed'
+    },
+    {
+      name: 'Archived',
+      state: hideArchived,
+      function: () => setHideArchived(!hideArchived),
+      tooltip: hideArchived ? 'Show archived tasks' : 'Hide archived tasks',
+      key: 'filter-archived'
+    },
+    {
+      // Example with dynamic name and conditional visibility
+      state: hideUrgent,
+      name: hideUrgent ? "Hiding Urgent" : "Showing Urgent",
+      tooltip: hideUrgent ? "Show urgent tasks" : "Hide urgent tasks",
+      function: () => setHideUrgent(!hideUrgent),
+      visible: !!setHideUrgent,  // Only show if handler exists
+    }
+  ];
+
+  const columns = [
+    { accessorKey: 'id', header: 'ID', type: 'integer' },
+    { accessorKey: 'title', header: 'Task', type: 'textTitle' },
+    { accessorKey: 'status', header: 'Status', type: 'text' },
+    { accessorKey: 'dueDate', header: 'Due Date', type: 'date', isDateColumn: true },
+  ];
+
+  return (
+    <DataGrid
+      columns={columns}
+      createRows={filteredTasks}
+      rowKey="id"
+      selectData={setSelected}
+      filterActions={filterActions}
+      gridHeight={600}
+    />
+  );
+}
+```
+
 ### Example 4: Hierarchical Data with SubRows
 
 ```jsx
@@ -1519,8 +1628,26 @@ interface ActionObject {
 }
 ```
 
-### Extra Action Object
+### Filter Action Object
+```typescript
+interface FilterActionObject {
+  // Required
+  name: string;                     // Button label
+  function: () => void;             // Toggle handler
+  state: boolean;                   // Current filter state (true=hidden, false=shown)
+  
+  // Display
+  tooltip?: string;                 // Hover tooltip
+  icon?: string | React.Element;    // Icon name or element (default: eye/eye-slash based on state)
+  visible?: boolean;                // Show/hide the button (default: true)
+  
+  // Behavior
+  disabled?: boolean;               // Manually disable the button
+  key?: string;                     // Unique React key (defaults to name)
+}
+```
 
+### Extra Action Object
 ```typescript
 interface ExtraActionObject {
   // Required
@@ -1532,6 +1659,7 @@ interface ExtraActionObject {
   icon?: string | React.Element;    // Icon name or element
   style?: React.CSSProperties;      // Custom button styles
   propsButton?: object;             // Additional Semantic UI Button props
+  visible?: boolean;                // Show/hide the button (default: true)
 }
 ```
 

package/build/wrapper/index.js

@@ -44,8 +44,8 @@ var DataGrid = function DataGrid(_ref) {
     createRows = _ref.createRows,
     _ref$actions = _ref.actions,
     actions = _ref$actions === void 0 ? null : _ref$actions,
-    _ref$filerActions = _ref.filerActions,
-    filerActions = _ref$filerActions === void 0 ? null : _ref$filerActions,
+    _ref$filterActions = _ref.filterActions,
+    filterActions = _ref$filterActions === void 0 ? null : _ref$filterActions,
     _ref$extraActions = _ref.extraActions,
     extraActions = _ref$extraActions === void 0 ? null : _ref$extraActions,
     _ref$hasExcelExport = _ref.hasExcelExport,
@@ -334,7 +334,7 @@ var DataGrid = function DataGrid(_ref) {
                 }, propsButton))
               })
             }, "extraActions" + idx);
-          }), (filerActions === null || filerActions === void 0 ? void 0 : filerActions.length) > 0 && filerActions.filter(function (e) {
+          }), (filterActions === null || filterActions === void 0 ? void 0 : filterActions.length) > 0 && filterActions.filter(function (e) {
             return e.visible !== undefined ? e.visible : true;
           }).map(function (e, idx) {
             var _ref4 = e || {},
@@ -893,7 +893,7 @@ DataGrid.propTypes = {
     visible: _propTypes["default"].bool
   })),
   // array of objects -> each object represents a single data grid action button
-  filerActions: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+  filterActions: _propTypes["default"].arrayOf(_propTypes["default"].shape({
     name: _propTypes["default"].string,
     "function": _propTypes["default"].func.isRequired,
     tooltip: _propTypes["default"].string,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@insticc/react-datagrid-2",
-  "version": "1.1.28",
+  "version": "1.1.30",
   "description": "",
   "main": "build/index.js",
   "files": [