@helpdice/ui 1.3.1 → 1.3.3

package/README.md

@@ -13,13 +13,13 @@
 2. import into project:
 
 ```jsx
-import { ThemeProvider, CssBaseline } from '@helpdice/ui'
+import { UiProvider, CssBaseline } from '@helpdice/ui'
 
 const Application = () => (
-  <ThemeProvider>
+  <UiProvider>
     <CssBaseline /> // ---> Normalize styles
     <AppComponent /> // ---> Your App Component
-  </ThemeProvider>
+  </UiProvider>
 )
 ```
 

package/dist/index.js

@@ -4736,7 +4736,7 @@ const ChevronLeft = ({ color, strokeWidth, set }) => {
     }
 };
 ChevronLeft.displayName = "ChevronLeft";
-createIcon(ChevronLeft);
+var ChevronLeft$1 = createIcon(ChevronLeft);
 
 const ChevronCircleRight = ({ color, strokeWidth, set }) => {
     const Broken = () => (React__namespace.createElement("g", null,
@@ -4819,7 +4819,7 @@ const ChevronRight = ({ color, strokeWidth, set }) => {
     }
 };
 ChevronRight.displayName = "ChevronRight";
-createIcon(ChevronRight);
+var ChevronRight$1 = createIcon(ChevronRight);
 
 const ChevronCircleUp = ({ color, strokeWidth, set }) => {
     const Broken = () => (React__namespace.createElement("g", null,
@@ -42116,7 +42116,8 @@ var TableHead = function TableHead(props) {
     columns = _ref.columns,
     width = _ref.width,
     onFilters = _ref.onFilters,
-    showFilters = _ref.showFilters;
+    showFilters = _ref.showFilters,
+    stickyHeader = _ref.stickyHeader;
   var isScalableWidth = React.useMemo(function () {
     return columns.find(function (item) {
       return !!item.width;
@@ -42205,9 +42206,9 @@ var TableHead = function TableHead(props) {
     });
   };
   return /*#__PURE__*/React.createElement(React.Fragment, null, colgroup, /*#__PURE__*/React.createElement("thead", {
-    className: _JSXStyle.dynamic([["134865897", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
+    className: _JSXStyle.dynamic([["3728881297", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n              position: sticky;\n              top: 0;\n              background-color: #fff;\n              z-index: 1;\n          ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
   }, /*#__PURE__*/React.createElement("tr", {
-    className: _JSXStyle.dynamic([["134865897", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
+    className: _JSXStyle.dynamic([["3728881297", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n              position: sticky;\n              top: 0;\n              background-color: #fff;\n              z-index: 1;\n          ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
   }, columns.map(function (column, index) {
     return /*#__PURE__*/React.createElement("th", {
       style: {
@@ -42219,23 +42220,23 @@ var TableHead = function TableHead(props) {
       },
       key: "table-th-".concat(column.prop.toString(), "-").concat(index),
       "data-column": column.label,
-      className: _JSXStyle.dynamic([["134865897", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + (column.className || "")
+      className: _JSXStyle.dynamic([["3728881297", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n              position: sticky;\n              top: 0;\n              background-color: #fff;\n              z-index: 1;\n          ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + (column.className || "")
     }, /*#__PURE__*/React.createElement("div", {
-      className: _JSXStyle.dynamic([["134865897", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + "thead-box"
+      className: _JSXStyle.dynamic([["3728881297", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n              position: sticky;\n              top: 0;\n              background-color: #fff;\n              z-index: 1;\n          ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + "thead-box"
     }, column.label, /*#__PURE__*/React.createElement("br", {
-      className: _JSXStyle.dynamic([["134865897", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
+      className: _JSXStyle.dynamic([["3728881297", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n              position: sticky;\n              top: 0;\n              background-color: #fff;\n              z-index: 1;\n          ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
     }), /*#__PURE__*/React.createElement("span", {
       style: {
         textAlign: 'center'
       },
-      className: _JSXStyle.dynamic([["134865897", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
+      className: _JSXStyle.dynamic([["3728881297", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n              position: sticky;\n              top: 0;\n              background-color: #fff;\n              z-index: 1;\n          ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
     }, column.text)));
   })), showFilters && /*#__PURE__*/React.createElement("tr", {
-    className: _JSXStyle.dynamic([["134865897", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
+    className: _JSXStyle.dynamic([["3728881297", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n              position: sticky;\n              top: 0;\n              background-color: #fff;\n              z-index: 1;\n          ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
   }, generateFilterInputs())), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "134865897",
-    dynamic: [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]
-  }, "thead.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;font-size:inherit;}th.__jsx-style-dynamic-selector{padding:0 0.5em;font-size:calc(0.75 * var(--table-font-size));font-weight:normal;text-align:left;-webkit-letter-spacing:0;-moz-letter-spacing:0;-ms-letter-spacing:0;letter-spacing:0;vertical-align:middle;min-height:calc(2.5 * var(--table-font-size));color:".concat(theme.palette.accents_5, ";background:").concat(theme.palette.accents_1, ";border-bottom:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-radius:0;}th.__jsx-style-dynamic-selector:nth-child(1){border-bottom:1px solid ").concat(theme.palette.border, ";border-left:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-left-radius:").concat(theme.layout.radius, ";border-bottom-left-radius:").concat(theme.layout.radius, ";}th.__jsx-style-dynamic-selector:last-child{border-bottom:1px solid ").concat(theme.palette.border, ";border-right:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-right-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";}.thead-box.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-align:center;min-height:calc(2.5 * var(--table-font-size));text-transform:uppercase;}")));
+    id: "3728881297",
+    dynamic: [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n              position: sticky;\n              top: 0;\n              background-color: #fff;\n              z-index: 1;\n          ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]
+  }, "thead.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;font-size:inherit;}th.__jsx-style-dynamic-selector{padding:0 0.5em;font-size:calc(0.75 * var(--table-font-size));font-weight:normal;text-align:left;-webkit-letter-spacing:0;-moz-letter-spacing:0;-ms-letter-spacing:0;letter-spacing:0;vertical-align:middle;min-height:calc(2.5 * var(--table-font-size));color:".concat(theme.palette.accents_5, ";background:").concat(theme.palette.accents_1, ";border-bottom:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-radius:0;").concat(stickyHeader && "\n              position: sticky;\n              top: 0;\n              background-color: #fff;\n              z-index: 1;\n          ", ";}th.__jsx-style-dynamic-selector:nth-child(1){border-bottom:1px solid ").concat(theme.palette.border, ";border-left:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-left-radius:").concat(theme.layout.radius, ";border-bottom-left-radius:").concat(theme.layout.radius, ";}th.__jsx-style-dynamic-selector:last-child{border-bottom:1px solid ").concat(theme.palette.border, ";border-right:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-right-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";}.thead-box.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-align:center;min-height:calc(2.5 * var(--table-font-size));text-transform:uppercase;}")));
 };
 TableHead.displayName = 'TableHead';
 
@@ -42473,7 +42474,7 @@ var TableColumn = function TableColumn(columnProps) {
 };
 TableColumn.displayName = 'TableColumn';
 
-var _excluded$b = ["children", "data", "initialData", "hover", "emptyText", "rowDraggable", "readOnly", "onRow", "onCell", "onChange", "onFilters", "showFilters", "onSelected", "className", "rowClassName"];
+var _excluded$b = ["children", "data", "initialData", "hover", "emptyText", "rowDraggable", "readOnly", "onRow", "onCell", "onChange", "onFilters", "onPageChange", "showFilters", "stickyHeader", "onSelected", "dataLength", "viewLength", "className", "rowClassName"];
 function TableComponent(tableProps) {
   /* eslint-disable  @typescript-eslint/no-unused-vars */
   var _ref = tableProps,
@@ -42493,9 +42494,14 @@ function TableComponent(tableProps) {
     onCell = _ref.onCell;
     _ref.onChange;
     var onFilters = _ref.onFilters,
+    onPageChange = _ref.onPageChange,
     _ref$showFilters = _ref.showFilters,
     showFilters = _ref$showFilters === undefined ? false : _ref$showFilters,
+    _ref$stickyHeader = _ref.stickyHeader,
+    stickyHeader = _ref$stickyHeader === undefined ? false : _ref$stickyHeader,
     onSelected = _ref.onSelected,
+    dataLength = _ref.dataLength,
+    viewLength = _ref.viewLength,
     _ref$className = _ref.className,
     className = _ref$className === undefined ? '' : _ref$className,
     _ref$rowClassName = _ref.rowClassName,
@@ -42544,6 +42550,16 @@ function TableComponent(tableProps) {
   useResize(function () {
     return updateShape();
   });
+
+  // Function to calculate start and end index for a given page
+  var getDataRange = function getDataRange(pageNumber, itemsPerPage, dataLength) {
+    var startIndex = (pageNumber - 1) * itemsPerPage;
+    var endIndex = Math.min(startIndex + itemsPerPage - 1, dataLength - 1);
+    return {
+      startIndex: startIndex,
+      endIndex: endIndex
+    };
+  };
   return /*#__PURE__*/React.createElement(TableContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/React.createElement("table", _extends({
@@ -42551,6 +42567,7 @@ function TableComponent(tableProps) {
   }, props, {
     className: _JSXStyle.dynamic([["2132340556", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || className || "")
   }), /*#__PURE__*/React.createElement(TableHead, {
+    stickyHeader: stickyHeader,
     columns: columns,
     onFilters: onFilters,
     showFilters: showFilters,
@@ -42568,7 +42585,19 @@ function TableComponent(tableProps) {
   }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "2132340556",
     dynamic: [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
-  }, "table.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;--table-font-size:".concat(SCALES.font(1), ";font-size:var(--table-font-size);width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}"))));
+  }, "table.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;--table-font-size:".concat(SCALES.font(1), ";font-size:var(--table-font-size);width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}")), dataLength && viewLength && onPageChange ? /*#__PURE__*/React.createElement("tfoot", {
+    className: _JSXStyle.dynamic([["2132340556", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
+  }, /*#__PURE__*/React.createElement(Pagination, {
+    onChange: function onChange(pageNumber) {
+      // Get the range for the current page
+      var _getDataRange = getDataRange(pageNumber, viewLength, dataLength),
+        startIndex = _getDataRange.startIndex,
+        endIndex = _getDataRange.endIndex;
+      onPageChange(pageNumber, startIndex, endIndex);
+    },
+    limit: 5,
+    count: Number(dataLength / viewLength)
+  }, /*#__PURE__*/React.createElement(Pagination.Next, null, /*#__PURE__*/React.createElement(ChevronRight$1, null)), /*#__PURE__*/React.createElement(Pagination.Previous, null, /*#__PURE__*/React.createElement(ChevronLeft$1, null)))) : null));
 }
 TableComponent.displayName = 'Table';
 TableComponent.Column = TableColumn;
@@ -42610,6 +42639,9 @@ function DataTable(_ref) {
     onDragLeave = _ref.onDragLeave,
     onDrop = _ref.onDrop,
     onRowClick = _ref.onRowClick,
+    dataLength = _ref.dataLength,
+    viewLength = _ref.viewLength,
+    _onPageChange = _ref.onPageChange,
     _ref$disableMenu = _ref.disableMenu,
     disableMenu = _ref$disableMenu === undefined ? false : _ref$disableMenu;
   var TABLE_ID = _.uniqueId('tbl');
@@ -42625,8 +42657,8 @@ function DataTable(_ref) {
   // };
   var _useState3 = React.useState([]),
     _useState4 = _slicedToArray(_useState3, 2),
-    hideColumn = _useState4[0];
-    _useState4[1];
+    hideColumn = _useState4[0],
+    setHideColumn = _useState4[1];
   // const handleMenuClose = () => {
   //     setAnchorEl(null);
   // };
@@ -42684,20 +42716,20 @@ function DataTable(_ref) {
   //     setSelected([]);
   // };
 
-  // const handleHideColumnClick = (event: React.MouseEvent<HTMLLIElement, MouseEvent>, id: any) => {
-  //     const selectedIndex = hideColumn.indexOf(id as never);
-  //     let newSelected: any[] | ((prevState: never[]) => never[]) = [];
-  //     if (selectedIndex === -1) {
-  //         newSelected = newSelected.concat(hideColumn, id);
-  //     } else if (selectedIndex === 0) {
-  //         newSelected = newSelected.concat(hideColumn.slice(1));
-  //     } else if (selectedIndex === hideColumn.length - 1) {
-  //         newSelected = newSelected.concat(hideColumn.slice(0, -1));
-  //     } else if (selectedIndex > 0) {
-  //         newSelected = newSelected.concat(hideColumn.slice(0, selectedIndex), hideColumn.slice(selectedIndex + 1));
-  //     }
-  //     setHideColumn(newSelected as never[]);
-  // };
+  var handleHideColumnClick = function handleHideColumnClick(_event, id) {
+    var selectedIndex = hideColumn.indexOf(id);
+    var newSelected = [];
+    if (selectedIndex === -1) {
+      newSelected = newSelected.concat(hideColumn, id);
+    } else if (selectedIndex === 0) {
+      newSelected = newSelected.concat(hideColumn.slice(1));
+    } else if (selectedIndex === hideColumn.length - 1) {
+      newSelected = newSelected.concat(hideColumn.slice(0, -1));
+    } else if (selectedIndex > 0) {
+      newSelected = newSelected.concat(hideColumn.slice(0, selectedIndex), hideColumn.slice(selectedIndex + 1));
+    }
+    setHideColumn(newSelected);
+  };
 
   // Children change reset selected
   React.useEffect(function () {
@@ -42736,6 +42768,19 @@ function DataTable(_ref) {
   var COLUMNS = cols.filter(function (col) {
     return !hideColumn.includes(col.name);
   });
+  var content = function content() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, cols.map(function (option, index) {
+      var colunqid = _.uniqueId("".concat(option.name, "-").concat(index));
+      return /*#__PURE__*/React.createElement(Popover.Item, {
+        key: colunqid
+        // selected={!hideColumn.includes(option.name as never)}
+        ,
+        onClick: function onClick(e) {
+          return handleHideColumnClick(e, option.name);
+        }
+      }, /*#__PURE__*/React.createElement("span", null, option.name));
+    }));
+  };
   return /*#__PURE__*/React.createElement(GridContainer, {
     direction: "column"
   }, /*#__PURE__*/React.createElement(Grid.Container, {
@@ -42834,13 +42879,15 @@ function DataTable(_ref) {
     px: 0.6,
     py: 0.4,
     type: "dark"
+  }, /*#__PURE__*/React.createElement(Popover, {
+    child: content
   }, /*#__PURE__*/React.createElement(Button, {
     onClick: function onClick() {},
     auto: true,
     scale: 2 / 3,
     px: 0.6,
     iconRight: /*#__PURE__*/React.createElement(Columns$1, null)
-  }))) : null))), children ? /*#__PURE__*/React.createElement("div", {
+  })))) : null))), children ? /*#__PURE__*/React.createElement("div", {
     style: {
       padding: '1rem'
     }
@@ -42865,11 +42912,21 @@ function DataTable(_ref) {
     onDrop: onDrop,
     id: TABLE_ID,
     style: _objectSpread2({
+      overflow: 'auto',
+      position: 'relative',
       height: 'calc(100vh - 8.5rem)',
       maxWidth: 'calc(100vw - 1rem)',
       width: sideMenu ? 'calc(100vw - 17.2rem)' : 'inherit !important'
     }, style)
   }, /*#__PURE__*/React.createElement(Table, {
+    stickyHeader: true,
+    dataLength: dataLength,
+    viewLength: viewLength,
+    onPageChange: function onPageChange(page, start, end) {
+      if (_onPageChange) {
+        _onPageChange(page, start, end);
+      }
+    },
     onRow: onRowClick,
     rowDraggable: rowDraggable,
     showFilters: openFilter,

package/dist/table/data-table.d.ts

@@ -29,8 +29,11 @@ type DataTableProps = {
     onDrop?: () => void;
     onRowClick?: (row: any) => void;
     disableMenu?: boolean;
+    dataLength?: number;
+    viewLength?: number;
+    onPageChange?: (page: number, start: number, end: number) => void;
 };
 declare function DataTable({ cols, rows, readOnly, heading, filter, menu, sideMenu, style, children, onBack, onRefresh, // Function
-onFilters, onSelectedDelete, onSelectedEdit, onSelected, disableViewColumn, rowDraggable, onDragOver, onDragEnter, onDragLeave, onDrop, onRowClick, disableMenu }: DataTableProps): React.JSX.Element;
+onFilters, onSelectedDelete, onSelectedEdit, onSelected, disableViewColumn, rowDraggable, onDragOver, onDragEnter, onDragLeave, onDrop, onRowClick, dataLength, viewLength, onPageChange, disableMenu }: DataTableProps): React.JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof DataTable>;
 export default _default;