@react-fabric/data 1.0.0-beta.0 → 1.0.0-beta.1

package/dist/cjs/table/AddColumn.js

@@ -0,0 +1,56 @@
+'use strict';
+
+var core = require('@react-fabric/core');
+var jsxRuntime = require('react/jsx-runtime');
+
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+var AddColumn = function AddColumn(_ref) {
+  var columns = _ref.columns,
+    onClick = _ref.onClick;
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: "group font-medium w-6 flex flex-nowrap text-start items-end",
+    children: /*#__PURE__*/jsxRuntime.jsxs(core.Dropdown, {
+      placement: "bottom-end",
+      children: [/*#__PURE__*/jsxRuntime.jsx(core.Icon, {
+        icon: core.CoreIcons.insert,
+        className: "p-1 rounded-t rounded-b-none hover:outline"
+      }), /*#__PURE__*/jsxRuntime.jsx(core.Menu, {
+        className: "text-sm",
+        onClick: onClick,
+        children: columns.map(function (col) {
+          var _col$label;
+          return /*#__PURE__*/jsxRuntime.jsx(core.MenuItem, {
+            id: String(col.id),
+            "data-dropdown-dismiss": "false",
+            label: "".concat((_col$label = col.label) !== null && _col$label !== void 0 ? _col$label : String(col.id)),
+            icon: !col.hidden ? core.CoreIcons.tick : ""
+          }, String(col.id));
+        })
+      })]
+    })
+  });
+};
+
+exports.AddColumn = AddColumn;

package/dist/cjs/table/BodyCell.js

@@ -1,6 +1,9 @@
 'use strict';
 
 var classNames = require('classnames');
+var react = require('react');
+var Context = require('./Context.js');
+var types = require('./types.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 /*
@@ -27,15 +30,21 @@ var jsxRuntime = require('react/jsx-runtime');
  */
 
 var BodyCell = function BodyCell(_ref) {
-  var _column$width, _column$minWidth, _column$maxWidth, _column$renderer, _column$renderer2;
+  var _column$minWidth, _column$maxWidth, _column$renderer, _column$renderer2;
   var column = _ref.column,
     item = _ref.item;
+  var _useTableContext = Context.useTableContext(),
+    widths = _useTableContext.widths;
+  var width = react.useMemo(function () {
+    var _widths$get;
+    return (_widths$get = widths.get(column.id.toString())) !== null && _widths$get !== void 0 ? _widths$get : column.width;
+  }, [widths, column]);
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: "overflow-hidden bg-inherit start-0",
     style: {
-      width: (_column$width = column.width) !== null && _column$width !== void 0 ? _column$width : "12rem",
-      minWidth: (_column$minWidth = column.minWidth) !== null && _column$minWidth !== void 0 ? _column$minWidth : "2rem",
-      maxWidth: (_column$maxWidth = column.maxWidth) !== null && _column$maxWidth !== void 0 ? _column$maxWidth : "32rem"
+      width: width !== null && width !== void 0 ? width : types.COL_DEFAULT_WIDTH,
+      minWidth: (_column$minWidth = column.minWidth) !== null && _column$minWidth !== void 0 ? _column$minWidth : types.COL_MIN_WIDTH,
+      maxWidth: (_column$maxWidth = column.maxWidth) !== null && _column$maxWidth !== void 0 ? _column$maxWidth : types.COL_MAX_WIDTH
     },
     children: /*#__PURE__*/jsxRuntime.jsx("div", {
       className: classNames("px-2 py-1 border-e truncate", column.align === "center" && "text-center", column.align === "end" && "text-end"),

package/dist/cjs/table/CheckboxCell.js

@@ -0,0 +1,44 @@
+'use strict';
+
+var core = require('@react-fabric/core');
+var jsxRuntime = require('react/jsx-runtime');
+
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+var CheckboxCell = function CheckboxCell(_ref) {
+  var state = _ref.state,
+    _onClick = _ref.onClick;
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: "group font-medium border-e w-6 flex flex-nowrap text-start items-center",
+    children: /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
+      icon: state === 2 ? core.CoreIcons.checkboxInt : state === 1 ? core.CoreIcons.checkboxOn : core.CoreIcons.checkboxOff,
+      className: "p-1 text-tint-700 hover:text-primary-600",
+      onClick: function onClick(e) {
+        return [_onClick === null || _onClick === void 0 ? void 0 : _onClick(), e.stopPropagation()];
+      }
+    })
+  });
+};
+
+exports.CheckboxCell = CheckboxCell;

package/dist/cjs/table/Context.js

@@ -0,0 +1,43 @@
+'use strict';
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var react = require('react');
+var useResizer = require('./useResizer.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+var TableContext = /*#__PURE__*/react.createContext({});
+var TableProvider = function TableProvider(_ref) {
+  var children = _ref.children;
+  var ghostRef = react.useRef(null);
+  var _useState = react.useState(new Map()),
+    _useState2 = _slicedToArray(_useState, 2),
+    widths = _useState2[0],
+    setWidths = _useState2[1];
+  var startResize = react.useCallback(function (col) {
+    if (col) {
+      ghostRef.current != null && useResizer.useResizer(col, ghostRef.current, function (width) {
+        var _col$dataset$id;
+        setWidths(new Map(widths.set((_col$dataset$id = col.dataset.id) !== null && _col$dataset$id !== void 0 ? _col$dataset$id : "", width)));
+      });
+    }
+  }, [widths]);
+  return /*#__PURE__*/jsxRuntime.jsxs(TableContext.Provider, {
+    value: {
+      startResize: startResize,
+      widths: widths
+    },
+    children: [children, /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "absolute inset-0 hidden z-20 cursor-col-resize",
+      ref: ghostRef,
+      children: /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "absolute inset-y-0 bg-muted opacity-50 border-primary border-e-2"
+      })
+    })]
+  });
+};
+var useTableContext = function useTableContext() {
+  return react.useContext(TableContext);
+};
+
+exports.TableProvider = TableProvider;
+exports.useTableContext = useTableContext;

package/dist/cjs/table/EmptyCell.js

@@ -0,0 +1,52 @@
+'use strict';
+
+var react = require('react');
+var Context = require('./Context.js');
+var types = require('./types.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+var EmptyCell = function EmptyCell(_ref) {
+  var id = _ref.id,
+    _width = _ref.width,
+    maxWidth = _ref.maxWidth,
+    minWidth = _ref.minWidth;
+  var _useTableContext = Context.useTableContext(),
+    widths = _useTableContext.widths;
+  var width = react.useMemo(function () {
+    var _widths$get;
+    return (_widths$get = widths.get(id.toString())) !== null && _widths$get !== void 0 ? _widths$get : _width;
+  }, [widths, id, _width]);
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: "overflow-hidden border-e",
+    style: {
+      width: width !== null && width !== void 0 ? width : types.COL_DEFAULT_WIDTH,
+      minWidth: minWidth !== null && minWidth !== void 0 ? minWidth : types.COL_MIN_WIDTH,
+      maxWidth: maxWidth !== null && maxWidth !== void 0 ? maxWidth : types.COL_MAX_WIDTH
+    }
+  }, "blank:".concat(id.toString()));
+};
+
+exports.EmptyCell = EmptyCell;

package/dist/cjs/table/HeaderCell.js

@@ -1,6 +1,9 @@
 'use strict';
 
 var core = require('@react-fabric/core');
+var react = require('react');
+var Context = require('./Context.js');
+var types = require('./types.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 /*
@@ -27,51 +30,93 @@ var jsxRuntime = require('react/jsx-runtime');
  */
 
 var HeaderCell = function HeaderCell(_ref) {
-  var label = _ref.label,
+  var id = _ref.id,
+    label = _ref.label,
     icon = _ref.icon,
     iconBg = _ref.iconBg,
     iconColor = _ref.iconColor,
     rtlFlip = _ref.rtlFlip;
     _ref.actions;
     _ref.locked;
-    var resizable = _ref.resizable,
-    width = _ref.width,
+    var sortable = _ref.sortable,
+    resizable = _ref.resizable,
+    _width = _ref.width,
     maxWidth = _ref.maxWidth,
-    minWidth = _ref.minWidth;
+    minWidth = _ref.minWidth,
+    sort = _ref.sort,
+    onSort = _ref.onSort;
+  var _useTableContext = Context.useTableContext(),
+    startResize = _useTableContext.startResize,
+    widths = _useTableContext.widths;
+  var width = react.useMemo(function () {
+    var _widths$get;
+    return (_widths$get = widths.get(id.toString())) !== null && _widths$get !== void 0 ? _widths$get : _width;
+  }, [widths, _width, id]);
+  var handleSort = react.useCallback(function () {
+    sortable && (onSort === null || onSort === void 0 ? void 0 : onSort({
+      id: id.toString(),
+      order: (sort === null || sort === void 0 ? void 0 : sort.id) === id && sort.order === "asc" ? "desc" : "asc"
+    }));
+  }, [onSort, name, sort, sortable]);
+  var menus = react.useMemo(function () {
+    var ret = [];
+    if (sortable) {
+      ret.push( /*#__PURE__*/jsxRuntime.jsx(core.MenuItem, {
+        label: "Sort ascending",
+        icon: core.CoreIcons.sortAsc
+      }, "sort-asc"), /*#__PURE__*/jsxRuntime.jsx(core.MenuItem, {
+        label: "Sort descending",
+        icon: core.CoreIcons.sortDesc
+      }, "sort-desc"));
+    }
+    return ret;
+  }, [sortable]);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "group font-medium border-e flex flex-nowrap text-start items-center",
+    role: "none",
+    "data-id": id,
+    onClick: handleSort,
+    className: "group font-medium border-e flex flex-nowrap text-start items-center table-header-cell",
     style: {
-      width: width !== null && width !== void 0 ? width : "12rem",
-      minWidth: minWidth !== null && minWidth !== void 0 ? minWidth : "2rem",
-      maxWidth: maxWidth !== null && maxWidth !== void 0 ? maxWidth : "32rem"
+      width: width !== null && width !== void 0 ? width : types.COL_DEFAULT_WIDTH,
+      minWidth: minWidth !== null && minWidth !== void 0 ? minWidth : types.COL_MIN_WIDTH,
+      maxWidth: maxWidth !== null && maxWidth !== void 0 ? maxWidth : types.COL_MAX_WIDTH
     },
-    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "flex-1 px-2 py-1 text-sm truncate sticky start-0",
-      children: [icon && /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
-        icon: icon,
-        bg: iconBg,
-        color: iconColor,
-        rtlFlip: rtlFlip
-      }), /*#__PURE__*/jsxRuntime.jsx("span", {
-        children: label !== null && label !== void 0 ? label : " "
-      })]
-    }), /*#__PURE__*/jsxRuntime.jsxs(core.Dropdown, {
-      placement: "bottom-start",
-      children: [/*#__PURE__*/jsxRuntime.jsx(core.Icon, {
-        icon: core.CoreIcons.caretDown,
-        className: "outline bg-base me-0.5 flex-content hidden group-hover:inline-block data-[dropdown-open]:inline-block"
-      }), /*#__PURE__*/jsxRuntime.jsxs(core.Menu, {
-        className: "text-sm",
-        children: [/*#__PURE__*/jsxRuntime.jsx(core.MenuItem, {
-          label: "Sort ascending",
-          icon: core.CoreIcons.sortAsc
-        }), /*#__PURE__*/jsxRuntime.jsx(core.MenuItem, {
-          label: "Sort descending",
-          icon: core.CoreIcons.sortDesc
+    children: [/*#__PURE__*/jsxRuntime.jsx(core.Tooltip, {
+      content: label,
+      disabled: !label,
+      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex-initial px-2 py-1 text-sm truncate sticky start-0",
+        children: [icon && /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
+          icon: icon,
+          bg: iconBg,
+          color: iconColor,
+          rtlFlip: rtlFlip
+        }), /*#__PURE__*/jsxRuntime.jsx("span", {
+          children: label !== null && label !== void 0 ? label : " "
         })]
+      })
+    }), sortable && /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "text-sm text-tint-300",
+      children: [(sort === null || sort === void 0 ? void 0 : sort.id) === id && (sort === null || sort === void 0 ? void 0 : sort.order) === "desc" && /*#__PURE__*/jsxRuntime.jsx("span", {
+        children: "\u25BC"
+      }), (sort === null || sort === void 0 ? void 0 : sort.id) === id && (sort === null || sort === void 0 ? void 0 : sort.order) === "asc" && /*#__PURE__*/jsxRuntime.jsx("span", {
+        children: "\u25B2"
       })]
+    }), /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex-1"
+    }), menus.length > 0 && /*#__PURE__*/jsxRuntime.jsx(core.DropdownTool, {
+      groupHover: true,
+      placement: "bottom-end",
+      children: /*#__PURE__*/jsxRuntime.jsx(core.Menu, {
+        className: "text-sm",
+        children: menus
+      })
     }), resizable && /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "cursor-col-resize border-e bg-transparent border-tint-200 w-[5px] self-stretch"
+      role: "none",
+      className: "cursor-col-resize border-e bg-transparent border-tint-200 w-[5px] self-stretch",
+      onMouseDown: function onMouseDown(e) {
+        return e.currentTarget.parentElement && startResize(e.currentTarget.parentElement);
+      }
     })]
   });
 };

package/dist/cjs/table/Table.js

@@ -1,25 +1,48 @@
 'use strict';
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var core = require('@react-fabric/core');
+var classNames = require('classnames');
 var react = require('react');
+var reactI18next = require('react-i18next');
+var AddColumn = require('./AddColumn.js');
 var BodyCell = require('./BodyCell.js');
+var CheckboxCell = require('./CheckboxCell.js');
+var Context = require('./Context.js');
+var EmptyCell = require('./EmptyCell.js');
 var HeaderCell = require('./HeaderCell.js');
 var useTableColumns = require('./useTableColumns.js');
 var useVirtualTable = require('./useVirtualTable.js');
-var classNames = require('classnames');
 var jsxRuntime = require('react/jsx-runtime');
 
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Table = function Table(_ref) {
-  var _columnMap$start, _columnMap$cols, _columnMap$end, _items$, _columnMap$start3, _columnMap$cols3, _columnMap$end3, _columnMap$start4, _columnMap$cols4, _columnMap$end4;
+  var _state$start, _state$cols, _state$end, _items$, _state$start3, _state$cols3, _state$end3;
   var data = _ref.data,
-    columns = _ref.columns;
+    columns = _ref.columns,
+    keyProperty = _ref.keyProperty,
+    checkableRows = _ref.checkableRows,
+    hideableColumns = _ref.hideableColumns,
+    sort = _ref.sort,
+    loading = _ref.loading,
+    onSort = _ref.onSort,
+    onRowClick = _ref.onRowClick,
+    onCheckedChanged = _ref.onCheckedChanged;
+  var _useTranslation = reactI18next.useTranslation("data"),
+    t = _useTranslation.t;
+  var fireCheckChanged = core.useDebounce(function (checkedIds) {
+    return onCheckedChanged === null || onCheckedChanged === void 0 ? void 0 : onCheckedChanged(checkedIds);
+  }, []);
   var _useTableColumns = useTableColumns.useTableColumns(columns),
-    columnMap = _useTableColumns.columnMap;
-  var _useVirtualTable = useVirtualTable.useVirtualTable(data),
+    state = _useTableColumns.state,
+    onHide = _useTableColumns.onHide;
+  var _useVirtualTable = useVirtualTable.useVirtualTable(data, keyProperty, fireCheckChanged),
     scrollerRef = _useVirtualTable.scrollerRef,
     items = _useVirtualTable.items,
+    checkState = _useVirtualTable.checkState,
+    toggleChecked = _useVirtualTable.toggleChecked,
+    toggleAllChecked = _useVirtualTable.toggleAllChecked,
     getData = _useVirtualTable.getData,
     totalSize = _useVirtualTable.totalSize,
     measureElement = _useVirtualTable.measureElement;
@@ -29,104 +52,123 @@ var Table = function Table(_ref) {
   var wrapperEnd = react.useMemo(function () {
     return "bg-inherit sticky end-0 flex flex-nowrap z-1 border-s -ms-px";
   }, []);
-  var emptyCol = react.useCallback(function (col, idc) {
-    var _col$width, _col$minWidth, _col$maxWidth;
-    return /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "overflow-hidden border-e",
-      style: {
-        width: (_col$width = col.width) !== null && _col$width !== void 0 ? _col$width : "12rem",
-        minWidth: (_col$minWidth = col.minWidth) !== null && _col$minWidth !== void 0 ? _col$minWidth : "2rem",
-        maxWidth: (_col$maxWidth = col.maxWidth) !== null && _col$maxWidth !== void 0 ? _col$maxWidth : "32rem"
-      }
-    }, "blank:".concat(idc));
-  }, []);
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "grid area-content overflow-auto relative",
-    style: {
-      gridTemplate: "\"head\" auto \"content\" 1fr \"foot\" auto/1fr"
-    },
-    ref: scrollerRef,
-    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "bg-base font-medium sticky top-0 area-head border-b select-none flex flex-nowrap z-2",
-      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-        className: wrapperStart,
-        children: (_columnMap$start = columnMap.start) === null || _columnMap$start === void 0 ? void 0 : _columnMap$start.map(function (col, idx) {
-          return /*#__PURE__*/jsxRuntime.jsx(HeaderCell.HeaderCell, _objectSpread({}, col), idx);
-        })
-      }), (_columnMap$cols = columnMap.cols) === null || _columnMap$cols === void 0 ? void 0 : _columnMap$cols.map(function (col, idx) {
-        return /*#__PURE__*/jsxRuntime.jsx(HeaderCell.HeaderCell, _objectSpread({}, col), idx);
-      }), /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: wrapperEnd,
-        children: (_columnMap$end = columnMap.end) === null || _columnMap$end === void 0 ? void 0 : _columnMap$end.map(function (col, idx) {
-          return /*#__PURE__*/jsxRuntime.jsx(HeaderCell.HeaderCell, _objectSpread({}, col), idx);
-        })
-      })]
-    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "area-content flex flex-col flex-nowrap",
+  return /*#__PURE__*/jsxRuntime.jsx(Context.TableProvider, {
+    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "grid area-content overflow-auto relative",
       style: {
-        height: totalSize()
+        gridTemplate: "\"head\" auto \"loader\" auto \"content\" 1fr \"foot\" auto/1fr"
       },
-      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      ref: scrollerRef,
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "bg-base font-medium sticky top-0 area-head border-b select-none flex flex-nowrap z-2",
+        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: wrapperStart,
+          children: [checkableRows && /*#__PURE__*/jsxRuntime.jsx(CheckboxCell.CheckboxCell, {
+            state: checkState.allChecked,
+            onClick: toggleAllChecked
+          }), (_state$start = state.start) === null || _state$start === void 0 ? void 0 : _state$start.map(function (col, idx) {
+            return /*#__PURE__*/jsxRuntime.jsx(HeaderCell.HeaderCell, _objectSpread(_objectSpread({}, col), {}, {
+              sort: sort,
+              onSort: onSort
+            }), idx);
+          })]
+        }), (_state$cols = state.cols) === null || _state$cols === void 0 ? void 0 : _state$cols.map(function (col, idx) {
+          return /*#__PURE__*/jsxRuntime.jsx(HeaderCell.HeaderCell, _objectSpread(_objectSpread({}, col), {}, {
+            sort: sort,
+            onSort: onSort
+          }), idx);
+        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: wrapperEnd,
+          children: [(_state$end = state.end) === null || _state$end === void 0 ? void 0 : _state$end.map(function (col, idx) {
+            return /*#__PURE__*/jsxRuntime.jsx(HeaderCell.HeaderCell, _objectSpread(_objectSpread({}, col), {}, {
+              sort: sort,
+              onSort: onSort
+            }), idx);
+          }), hideableColumns && /*#__PURE__*/jsxRuntime.jsx(AddColumn.AddColumn, {
+            onClick: onHide,
+            columns: state.columns.filter(function (col) {
+              return col.hideable !== false;
+            })
+          })]
+        })]
+      }), loading && /*#__PURE__*/jsxRuntime.jsx(core.Loading, {}), data.length > 0 && /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "area-content flex flex-col flex-nowrap",
         style: {
-          height: (_items$ = items[0]) === null || _items$ === void 0 ? void 0 : _items$.start
-        }
-      }), items.map(function (_ref2) {
-        var _columnMap$start2, _columnMap$cols2, _columnMap$end2;
-        var index = _ref2.index,
-          key = _ref2.key;
-        return /*#__PURE__*/jsxRuntime.jsxs("div", {
-          className: classNames("flex flex-nowrap", index % 2 ? "bg-even" : "bg-odd"),
-          "data-index": index,
-          ref: measureElement,
-          children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-            className: wrapperStart,
-            children: (_columnMap$start2 = columnMap.start) === null || _columnMap$start2 === void 0 ? void 0 : _columnMap$start2.map(function (col, ids) {
+          height: totalSize()
+        },
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          style: {
+            height: (_items$ = items[0]) === null || _items$ === void 0 ? void 0 : _items$.start
+          }
+        }), items.map(function (_ref2) {
+          var _state$start2, _state$cols2, _state$end2;
+          var index = _ref2.index,
+            key = _ref2.key;
+          var data = getData(index);
+          return /*#__PURE__*/jsxRuntime.jsxs("div", {
+            role: "none",
+            className: classNames("flex flex-nowrap", index % 2 ? "bg-even" : "bg-odd", onRowClick && "hover:bg-primary-50 active:bg-primary-100"),
+            onClick: function onClick() {
+              return checkableRows && !onRowClick ? toggleChecked(data[keyProperty]) : onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(data);
+            },
+            "data-index": index,
+            ref: measureElement,
+            children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+              className: wrapperStart,
+              children: [checkableRows && /*#__PURE__*/jsxRuntime.jsx(CheckboxCell.CheckboxCell, {
+                onClick: function onClick() {
+                  return toggleChecked(data[keyProperty]);
+                },
+                state: checkState.checked.includes(data[keyProperty]) ? 1 : 0
+              }), (_state$start2 = state.start) === null || _state$start2 === void 0 ? void 0 : _state$start2.map(function (col, ids) {
+                return /*#__PURE__*/jsxRuntime.jsx(BodyCell.BodyCell, {
+                  column: col,
+                  item: data
+                }, "".concat(key, ":").concat(ids));
+              })]
+            }), (_state$cols2 = state.cols) === null || _state$cols2 === void 0 ? void 0 : _state$cols2.map(function (col, idc) {
               return /*#__PURE__*/jsxRuntime.jsx(BodyCell.BodyCell, {
                 column: col,
-                item: getData(index)
-              }, "".concat(key, ":").concat(ids));
-            })
-          }), (_columnMap$cols2 = columnMap.cols) === null || _columnMap$cols2 === void 0 ? void 0 : _columnMap$cols2.map(function (col, idc) {
-            return /*#__PURE__*/jsxRuntime.jsx(BodyCell.BodyCell, {
-              column: col,
-              item: getData(index)
-            }, "".concat(key, ":").concat(idc));
-          }), /*#__PURE__*/jsxRuntime.jsx("div", {
+                item: data
+              }, "".concat(key, ":").concat(idc));
+            }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+              className: wrapperEnd,
+              children: [(_state$end2 = state.end) === null || _state$end2 === void 0 ? void 0 : _state$end2.map(function (col, ide) {
+                return /*#__PURE__*/jsxRuntime.jsx(BodyCell.BodyCell, {
+                  column: col,
+                  item: data
+                }, "".concat(key, ":").concat(ide));
+              }), hideableColumns && /*#__PURE__*/jsxRuntime.jsx("div", {
+                className: "w-6"
+              })]
+            })]
+          }, key);
+        }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex-1 flex flex-nowrap",
+          children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: wrapperStart,
+            children: [checkableRows && /*#__PURE__*/jsxRuntime.jsx("div", {
+              className: "w-6"
+            }), (_state$start3 = state.start) === null || _state$start3 === void 0 ? void 0 : _state$start3.map(function (col) {
+              return /*#__PURE__*/jsxRuntime.jsx(EmptyCell.EmptyCell, _objectSpread({}, col), String(col.id));
+            })]
+          }), (_state$cols3 = state.cols) === null || _state$cols3 === void 0 ? void 0 : _state$cols3.map(function (col) {
+            return /*#__PURE__*/jsxRuntime.jsx(EmptyCell.EmptyCell, _objectSpread({}, col), String(col.id));
+          }), /*#__PURE__*/jsxRuntime.jsxs("div", {
             className: wrapperEnd,
-            children: (_columnMap$end2 = columnMap.end) === null || _columnMap$end2 === void 0 ? void 0 : _columnMap$end2.map(function (col, ide) {
-              return /*#__PURE__*/jsxRuntime.jsx(BodyCell.BodyCell, {
-                column: col,
-                item: getData(index)
-              }, "".concat(key, ":").concat(ide));
-            })
+            children: [(_state$end3 = state.end) === null || _state$end3 === void 0 ? void 0 : _state$end3.map(function (col) {
+              return /*#__PURE__*/jsxRuntime.jsx(EmptyCell.EmptyCell, _objectSpread({}, col), String(col.id));
+            }), hideableColumns && /*#__PURE__*/jsxRuntime.jsx("div", {
+              className: "w-6"
+            })]
           })]
-        }, key);
-      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "flex-1 flex flex-nowrap",
-        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-          className: wrapperStart,
-          children: (_columnMap$start3 = columnMap.start) === null || _columnMap$start3 === void 0 ? void 0 : _columnMap$start3.map(emptyCol)
-        }), (_columnMap$cols3 = columnMap.cols) === null || _columnMap$cols3 === void 0 ? void 0 : _columnMap$cols3.map(emptyCol), /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: wrapperEnd,
-          children: (_columnMap$end3 = columnMap.end) === null || _columnMap$end3 === void 0 ? void 0 : _columnMap$end3.map(emptyCol)
         })]
+      }), !loading && data.length === 0 && /*#__PURE__*/jsxRuntime.jsx(core.EmptyContent, {
+        size: "sm",
+        className: "bg-dimmed",
+        message: t("datagrid.empty")
       })]
-    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "area-foot bg-dimmed border-t sticky bottom-0 flex flex-nowrap z-2",
-      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-        className: wrapperStart,
-        children: (_columnMap$start4 = columnMap.start) === null || _columnMap$start4 === void 0 ? void 0 : _columnMap$start4.map(function (col, idx) {
-          return /*#__PURE__*/jsxRuntime.jsx(HeaderCell.HeaderCell, _objectSpread({}, col), idx);
-        })
-      }), (_columnMap$cols4 = columnMap.cols) === null || _columnMap$cols4 === void 0 ? void 0 : _columnMap$cols4.map(function (col, idx) {
-        return /*#__PURE__*/jsxRuntime.jsx(HeaderCell.HeaderCell, _objectSpread({}, col), idx);
-      }), /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: wrapperEnd,
-        children: (_columnMap$end4 = columnMap.end) === null || _columnMap$end4 === void 0 ? void 0 : _columnMap$end4.map(function (col, idx) {
-          return /*#__PURE__*/jsxRuntime.jsx(HeaderCell.HeaderCell, _objectSpread({}, col), idx);
-        })
-      })]
-    })]
+    })
   });
 };