@insticc/react-datagrid-2 1.1.27 → 1.1.29

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,6 +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$extraActions = _ref.extraActions,
     extraActions = _ref$extraActions === void 0 ? null : _ref$extraActions,
     _ref$hasExcelExport = _ref.hasExcelExport,
@@ -253,6 +255,12 @@ var DataGrid = function DataGrid(_ref) {
   var renderTopToolbarCustomActions = function renderTopToolbarCustomActions(_ref2) {
     var table = _ref2.table;
     var selectedRows = table.getSelectedRowModel().flatRows;
+    var defaultStyle = {
+      display: 'flex',
+      height: '36px',
+      alignItems: 'center',
+      justifyContent: 'center'
+    };
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       style: {
         display: 'flex',
@@ -272,7 +280,9 @@ var DataGrid = function DataGrid(_ref) {
             gap: '.5em',
             flexWrap: 'wrap'
           },
-          children: (actions === null || actions === void 0 ? void 0 : actions.length) > 0 && actions.map(function (e) {
+          children: (actions === null || actions === void 0 ? void 0 : actions.length) > 0 && actions.filter(function (e) {
+            return e.visible !== undefined ? e.visible : true;
+          }).map(function (e) {
             return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionButton["default"], {
               table: table,
               toggle: e.toggle,
@@ -297,7 +307,9 @@ var DataGrid = function DataGrid(_ref) {
             flexWrap: 'wrap',
             gap: 3
           },
-          children: [(extraActions === null || extraActions === void 0 ? void 0 : extraActions.length) > 0 && extraActions.map(function (a, idx) {
+          children: [(extraActions === null || extraActions === void 0 ? void 0 : extraActions.length) > 0 && extraActions.filter(function (e) {
+            return e.visible !== undefined ? e.visible : true;
+          }).map(function (a, idx) {
             var _ref3 = a || {},
               fnc = _ref3["function"],
               content = _ref3.content,
@@ -307,12 +319,6 @@ var DataGrid = function DataGrid(_ref) {
               _ref3$style = _ref3.style,
               style = _ref3$style === void 0 ? {} : _ref3$style,
               propsButton = _ref3.propsButton;
-            var defaultStyle = {
-              display: 'flex',
-              height: '36px',
-              alignItems: 'center',
-              justifyContent: 'center'
-            };
             return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
               title: tooltip || content,
               arrow: true,
@@ -328,6 +334,41 @@ var DataGrid = function DataGrid(_ref) {
                 }, propsButton))
               })
             }, "extraActions" + idx);
+          }), (filerActions === null || filerActions === void 0 ? void 0 : filerActions.length) > 0 && filerActions.filter(function (e) {
+            return e.visible !== undefined ? e.visible : true;
+          }).map(function (e, idx) {
+            var _ref4 = e || {},
+              state = _ref4.state,
+              fnc = _ref4["function"],
+              key = _ref4.key,
+              name = _ref4.name,
+              _ref4$tooltip = _ref4.tooltip,
+              tooltip = _ref4$tooltip === void 0 ? '' : _ref4$tooltip,
+              disabled = _ref4.disabled;
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+              title: tooltip || name,
+              arrow: true,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_semanticUiReact.Button, _objectSpread(_objectSpread({
+                  circular: true,
+                  toggle: true,
+                  active: !state,
+                  inverted: true,
+                  color: state ? "orange" : "green"
+                }, name ? {
+                  content: name
+                } : {}), {}, {
+                  onClick: fnc,
+                  icon: state ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_semanticUiReact.Icon, {
+                    name: "eye slash"
+                  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_semanticUiReact.Icon, {
+                    name: "eye"
+                  }),
+                  disabled: disabled,
+                  style: defaultStyle
+                }), key || name)
+              })
+            }, "filterActions" + idx);
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExportActions["default"], {
             table: table,
             data: createRows,
@@ -353,12 +394,7 @@ var DataGrid = function DataGrid(_ref) {
                 }),
                 primary: true,
                 inverted: true,
-                style: {
-                  display: 'flex',
-                  height: '36px',
-                  alignItems: 'center',
-                  justifyContent: 'center'
-                }
+                style: defaultStyle
               })
             })
           }), hasClearSelectionBtn && (!disableSelect || disableRows.length > 0) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
@@ -518,16 +554,16 @@ var DataGrid = function DataGrid(_ref) {
       filterRegex: 'Regex',
       filterLogical: 'Logical'
     },
-    renderColumnFilterModeMenuItems: function renderColumnFilterModeMenuItems(_ref4) {
-      var internalFilterOptions = _ref4.internalFilterOptions,
-        onSelectFilterMode = _ref4.onSelectFilterMode;
+    renderColumnFilterModeMenuItems: function renderColumnFilterModeMenuItems(_ref5) {
+      var internalFilterOptions = _ref5.internalFilterOptions,
+        onSelectFilterMode = _ref5.onSelectFilterMode;
       return [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ColumnFilter["default"], {
         filterOptions: internalFilterOptions,
         onSelectFilterMode: onSelectFilterMode
       }, "filters")];
     },
-    renderTopToolbar: function renderTopToolbar(_ref5) {
-      var table = _ref5.table;
+    renderTopToolbar: function renderTopToolbar(_ref6) {
+      var table = _ref6.table;
       var selectedRows = table.getSelectedRowModel().flatRows;
       var _table$getState$pagin = table.getState().pagination,
         pageIndex = _table$getState$pagin.pageIndex,
@@ -654,8 +690,8 @@ var DataGrid = function DataGrid(_ref) {
         padding: 'auto'
       })
     },
-    muiTableBodyCellProps: function muiTableBodyCellProps(_ref6) {
-      var row = _ref6.row;
+    muiTableBodyCellProps: function muiTableBodyCellProps(_ref7) {
+      var row = _ref7.row;
       var isDisabled = disableRows.length > 0 ? disableRows.includes(row.original[rowKey]) : false;
       return {
         sx: _objectSpread(_objectSpread({
@@ -750,8 +786,8 @@ var DataGrid = function DataGrid(_ref) {
       };
     },
     onRowSelectionChange: setRowSelection,
-    muiTableBodyRowProps: function muiTableBodyRowProps(_ref7) {
-      var row = _ref7.row;
+    muiTableBodyRowProps: function muiTableBodyRowProps(_ref8) {
+      var row = _ref8.row;
       return {
         sx: {
           backgroundColor: row.depth > 0 ? '#f0f0f0' : 'white'
@@ -763,8 +799,8 @@ var DataGrid = function DataGrid(_ref) {
     enableTopToolbar: enableTopToolbar,
     enableBottomToolbar: enableBottomToolbar,
     enableExpanding: enableExpanding,
-    muiSelectCheckboxProps: function muiSelectCheckboxProps(_ref8) {
-      var row = _ref8.row;
+    muiSelectCheckboxProps: function muiSelectCheckboxProps(_ref9) {
+      var row = _ref9.row;
       return {
         checked: rowSelection[row.id] || false,
         onChange: function onChange() {
@@ -815,7 +851,7 @@ var DataGrid = function DataGrid(_ref) {
       return r.original;
     });
     if (onVisibleRowsChange) onVisibleRowsChange(rows);
-  }, [table, onVisibleRowsChange]);
+  }, [table.getRowModel().rows, onVisibleRowsChange]);
   (0, _react.useEffect)(function () {
     if (enableFixedHeader) (0, _gridFixedHeader["default"])('fixed-header', enableFixedActions);
   }, [enableFixedHeader, enableFixedActions]);
@@ -853,16 +889,26 @@ DataGrid.propTypes = {
     icon: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].string]),
     selectionMode: _propTypes["default"].oneOf(['single', 'multi', 'always']),
     confirmMessage: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].string]),
-    hasConfirmMessage: _propTypes["default"].bool
+    hasConfirmMessage: _propTypes["default"].bool,
+    visible: _propTypes["default"].bool
   })),
   // array of objects -> each object represents a single data grid action button
+  filerActions: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    name: _propTypes["default"].string,
+    "function": _propTypes["default"].func.isRequired,
+    tooltip: _propTypes["default"].string,
+    icon: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].string]),
+    visible: _propTypes["default"].bool
+  })),
+  // array of objects -> each object represents a single data grid filter action button
   extraActions: _propTypes["default"].arrayOf(_propTypes["default"].shape({
     tooltip: _propTypes["default"].string,
     "function": _propTypes["default"].func.isRequired,
     content: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].element]).isRequired,
     icon: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].string]),
     style: _propTypes["default"].object,
-    propsButton: _propTypes["default"].object
+    propsButton: _propTypes["default"].object,
+    visible: _propTypes["default"].bool
   })),
   // array of objects -> each object represents a single data grid extra action button
   hasExcelExport: _propTypes["default"].bool,

package/package.json

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