@carbon/ibm-products 1.13.0 → 1.14.0

package/es/components/Datagrid/Datagrid.stories/StickyActionsColumnStory.js

@@ -0,0 +1,92 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import React, { useState, useEffect } from 'react';
+import { Datagrid, useActionsColumn, useDatagrid, useStickyColumn } from '..';
+import { defaultHeader, makeData, Wrapper } from './common';
+
+var StickyActionsColumn = function StickyActionsColumn() {
+  var columns = React.useMemo(function () {
+    return [].concat(_toConsumableArray(defaultHeader), [{
+      Header: '',
+      accessor: 'actions',
+      sticky: 'right',
+      width: 60,
+      isAction: true
+    }]);
+  }, []);
+
+  var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      data = _useState2[0],
+      setData = _useState2[1];
+
+  var _useState3 = useState('click action menu'),
+      _useState4 = _slicedToArray(_useState3, 2),
+      msg = _useState4[0],
+      setMsg = _useState4[1];
+
+  var onActionClick = function onActionClick(actionId, row) {
+    var original = row.original;
+    setMsg("Clicked [".concat(actionId, "] on row: <").concat(original.firstName, " ").concat(original.lastName, ">"));
+  };
+
+  var _useState5 = useState(true),
+      _useState6 = _slicedToArray(_useState5, 2),
+      isFetching = _useState6[0],
+      setIsFetching = _useState6[1];
+
+  useEffect(function () {
+    var fetchData = function fetchData() {
+      return new Promise(function (resolve) {
+        setIsFetching(true);
+        setTimeout(function () {
+          setData(data.concat(makeData(30, 5, 2)));
+          resolve();
+        }, 1000);
+      }).then(function () {
+        return setIsFetching(false);
+      });
+    };
+
+    fetchData();
+  }, [data]);
+  var datagridState = useDatagrid({
+    columns: columns,
+    data: data,
+    isFetching: isFetching,
+    rowActions: [{
+      id: 'edit',
+      itemText: 'Edit',
+      onClick: onActionClick
+    }, {
+      id: 'vote',
+      itemText: 'Vote',
+      onClick: onActionClick,
+      shouldHideMenuItem: function shouldHideMenuItem(row) {
+        return row.original.age <= 18;
+      }
+    }, {
+      id: 'retire',
+      itemText: 'Retire',
+      onClick: onActionClick,
+      disabled: false,
+      shouldDisableMenuItem: function shouldDisableMenuItem(row) {
+        return row.original.age <= 60;
+      }
+    }, {
+      id: 'delete',
+      itemText: 'Delete',
+      hasDivider: true,
+      isDelete: true,
+      onClick: onActionClick
+    }]
+  }, useStickyColumn, useActionsColumn);
+  return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement("h3", null, msg), /*#__PURE__*/React.createElement(Datagrid, datagridState), /*#__PURE__*/React.createElement("p", null, "More details documentation check the Notes section below"));
+};
+
+StickyActionsColumn.story = {
+  parameters: {
+    notes: "\n    Sticky column and actions column can be used at the same time like the demo above. Following is the doc for each of them.\n\n    # Sticky column\n    This will make the column mark with `sticky: \"right\"` to be sticky on the right.\n\n    ## Incompatible with following plugins:\n    - `useInfiniteScroll`\n\n    ## Sample usage:\n    \n    1. include the `useStickyColumn` hook\n    2. add `sticky=\"right\"` to the column object\n\n    ```js\n    const columns = [\n      ... // other columns\n      {\n        Header: \"\",\n        accessor: \"actions\",\n        sticky: \"right\",\n        width: 60,\n      },\n    ]\n    const datagridState = useDatagrid(\n      {\n        columns,\n        data,\n      },\n      useStickyColumn\n    );\n    ```\n    ```html\n    <Datagrid {...datagridState} />\n    ```\n\n    # Actions column\n    This will add OverflowMenu component to the cells on the column mark with `isAction: true`. Each action button callback will include the actionId and row object\n\n    ## Sample usage:\n    1. include `useActionsColumn` hook\n    2. add `isAction = true` to the column object in which you which to add the overflow menu actions\n    3. add `rowActions = []` array to the props\n      - `rowActions[].id` for callback to identify the action is called\n      - `rowActions[].onClick(actionId: string, row: Row, event: ClickEvent)` callback on menuitem clicked. [Row properties](https://react-table.tanstack.com/docs/api/useTable#row-properties)\n      - `rowActions[].shouldHideMenuItem(row: Row)` callback to hide this menuitem. [Row properties](https://react-table.tanstack.com/docs/api/useTable#row-properties)\n      - `rowActions[].shouldDisableMenuItem(row: Row)` callback to disable this menuitem. [Row properties](https://react-table.tanstack.com/docs/api/useTable#row-properties)\n        - This will override `rowActions[].disabled` (from Carbon) because `shouldDisableMenuItem` is more specific to the row.\n      - each action object can take all the props from `OverflowMenuItem` props, see [carbon docs](https://react.carbondesignsystem.com/?path=/docs/components-overflowmenu--default#overflowmenu)\n\n    ```js\n    const columns = [\n      ... // other columns\n      {\n        Header: \"\",\n        accessor: \"actions\",\n        isAction: true,\n      },\n    ]\n    const onActionClick = (actionId, row, event) => {};\n    const datagridState = useDatagrid(\n      {\n        columns,\n        data,\n        rowActions: [\n          {\n            id: 'edit',\n            itemText: 'Edit',\n            onClick: onActionClick\n          },\n          {\n            id: 'hidden',\n            itemText: 'Hidden item',\n            onClick: onActionClick,\n            shouldHideMenuItem: () => true,\n          },\n          {\n            id: 'delete',\n            itemText: 'Delete',\n            hasDivider: true,\n            isDelete: true,\n            onClick: onActionClick\n          },\n        ]\n      },\n      useActionsColumn,\n    );\n    ```\n    ```html\n    <Datagrid {...datagridState} />\n    ```\n    "
+  }
+};
+export default StickyActionsColumn;

package/es/components/Datagrid/Datagrid.stories/common.js

@@ -0,0 +1,199 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import React from 'react';
+import namor from 'namor';
+
+var range = function range(len) {
+  var arr = [];
+
+  for (var i = 0; i < len; i++) {
+    arr.push(i);
+  }
+
+  return arr;
+};
+
+var newPerson = function newPerson() {
+  var statusChance = Math.random();
+  return {
+    firstName: namor.generate({
+      words: 1,
+      numbers: 0
+    }),
+    lastName: namor.generate({
+      words: 1,
+      numbers: 0
+    }),
+    age: Math.floor(Math.random() * 30),
+    visits: Math.floor(Math.random() * 100),
+    progress: Math.floor(Math.random() * 100),
+    someone1: namor.generate({
+      words: 1,
+      numbers: 0
+    }),
+    someone2: namor.generate({
+      words: 1,
+      numbers: 0
+    }),
+    someone3: namor.generate({
+      words: 1,
+      numbers: 0
+    }),
+    someone4: namor.generate({
+      words: 1,
+      numbers: 0
+    }),
+    someone5: namor.generate({
+      words: 1,
+      numbers: 0
+    }),
+    someone6: namor.generate({
+      words: 1,
+      numbers: 0
+    }),
+    someone7: namor.generate({
+      words: 1,
+      numbers: 0
+    }),
+    someone8: namor.generate({
+      words: 1,
+      numbers: 0
+    }),
+    someone9: namor.generate({
+      words: 1,
+      numbers: 0
+    }),
+    someone10: namor.generate({
+      words: 1,
+      numbers: 0
+    }),
+    someone11: namor.generate({
+      words: 1,
+      numbers: 0
+    }),
+    someone12: namor.generate({
+      words: 1,
+      numbers: 0
+    }),
+    someone13: namor.generate({
+      words: 1,
+      numbers: 0
+    }),
+    someone14: namor.generate({
+      words: 1,
+      numbers: 0
+    }),
+    someone15: namor.generate({
+      words: 1,
+      numbers: 0
+    }),
+    someone16: namor.generate({
+      words: 1,
+      numbers: 0
+    }),
+    someone17: namor.generate({
+      words: 1,
+      numbers: 0
+    }),
+    someone18: namor.generate({
+      words: 1,
+      numbers: 0
+    }),
+    someone19: namor.generate({
+      words: 1,
+      numbers: 0
+    }),
+    someone20: namor.generate({
+      words: 1,
+      numbers: 0
+    }),
+    status: statusChance > 0.66 ? 'relationship' : statusChance > 0.33 ? 'complicated' : 'single'
+  };
+}; // eslint-disable-next-line react/prop-types
+
+
+export var Wrapper = function Wrapper(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: '490px',
+      width: '100%',
+      padding: '16px',
+      margin: '0',
+      zIndex: '0'
+    }
+  }, children);
+};
+export var makeData = function makeData() {
+  for (var _len = arguments.length, lens = new Array(_len), _key = 0; _key < _len; _key++) {
+    lens[_key] = arguments[_key];
+  }
+
+  var makeDataLevel = function makeDataLevel() {
+    var depth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+    var len = lens[depth];
+    return range(len).map(function () {
+      return _objectSpread(_objectSpread({}, newPerson()), {}, {
+        subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined
+      });
+    });
+  };
+
+  return makeDataLevel();
+};
+export var defaultHeader = [{
+  Header: 'Row Index',
+  accessor: function accessor(row, i) {
+    return i;
+  },
+  sticky: 'left'
+}, {
+  Header: 'First Name',
+  accessor: 'firstName',
+  sticky: 'left'
+}, {
+  Header: 'Last Name',
+  accessor: 'lastName'
+}, {
+  Header: 'Age',
+  accessor: 'age',
+  width: 50
+}, {
+  Header: 'Visits',
+  accessor: 'visits',
+  width: 60
+}, {
+  Header: 'Someone 1',
+  accessor: 'someone1'
+}, {
+  Header: 'Someone 2',
+  accessor: 'someone2'
+}, {
+  Header: 'Someone 3',
+  accessor: 'someone3'
+}, {
+  Header: 'Someone 4',
+  accessor: 'someone4'
+}, {
+  Header: 'Someone 5',
+  accessor: 'someone5'
+}, {
+  Header: 'Someone 6',
+  accessor: 'someone6'
+}, {
+  Header: 'Someone 7',
+  accessor: 'someone7'
+}, {
+  Header: 'Someone 8',
+  accessor: 'someone8'
+}, {
+  Header: 'Someone 9',
+  accessor: 'someone9'
+}, {
+  Header: 'Someone 10',
+  accessor: 'someone10'
+}];

package/es/components/Datagrid/Datagrid.stories/index.js

@@ -0,0 +1,5 @@
+export { story as CustomizeColumnStory } from './CustomizeColumnStory';
+export { default as StickyActionsColumn } from './StickyActionsColumnStory';
+export { story as RowSizeDropdownStory } from './RowSizeDropdownStory';
+export { story as LeftPanelStory } from './LeftPanelStory';
+export { story as SelectAllWitHToggle } from './SelectAllWithToggleStory';

package/es/components/Datagrid/common-column-ids.js

@@ -0,0 +1,8 @@
+/*
+ * Licensed Materials - Property of IBM
+ * 5724-Q36
+ * (c) Copyright IBM Corp. 2021
+ * US Government Users Restricted Rights - Use, duplication or disclosure
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
+ */
+export var selectionColumnId = 'datagridSelection';

package/es/components/Datagrid/index.js

@@ -0,0 +1,22 @@
+/*
+ * Licensed Materials - Property of IBM
+ * 5724-Q36
+ * (c) Copyright IBM Corp. 2020
+ * US Government Users Restricted Rights - Use, duplication or disclosure
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
+ */
+export { default as Datagrid } from './Datagrid';
+export { default as useDatagrid } from './useDatagrid';
+export { default as useInfiniteScroll } from './useInfiniteScroll';
+export { default as useNestedRows } from './useNestedRows';
+export { default as useSelectRows } from './useSelectRows';
+export { default as useExpandedRow } from './useExpandedRow';
+export { default as useOnRowClick } from './useOnRowClick';
+export { default as useSortableColumns } from './useSortableColumns';
+export { default as useRowIsMouseOver } from './useRowIsMouseOver';
+export { default as useColumnRightAlign } from './useColumnRightAlign';
+export { default as useDisableSelectRows } from './useDisableSelectRows';
+export { default as useStickyColumn } from './useStickyColumn';
+export { default as useActionsColumn } from './useActionsColumn';
+export { default as useCustomizeColumns } from './useCustomizeColumns';
+export { default as useSelectAllWithToggle } from './useSelectAllToggle';

package/es/components/Datagrid/useActionsColumn.js

@@ -0,0 +1,86 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["id", "onClick", "shouldHideMenuItem", "shouldDisableMenuItem", "disabled"];
+
+/*
+ * Licensed Materials - Property of IBM
+ * 5724-Q36
+ * (c) Copyright IBM Corp. 2021
+ * US Government Users Restricted Rights - Use, duplication or disclosure
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
+ */
+import React from 'react';
+import cx from 'classnames';
+import { IconSkeleton, OverflowMenu, OverflowMenuItem } from 'carbon-components-react';
+import { pkg } from '../../settings';
+var blockClass = "".concat(pkg.prefix, "--datagrid");
+
+var useActionsColumn = function useActionsColumn(hooks) {
+  var useAttachActionsOnInstance = function useAttachActionsOnInstance(instance) {
+    var rowActions = instance.rowActions,
+        isFetching = instance.isFetching;
+
+    if (rowActions && Array.isArray(rowActions)) {
+      var addActionsMenu = function addActionsMenu(props, cellData) {
+        var cell = cellData.cell;
+        var row = cell.row,
+            column = cell.column;
+
+        if (column.isAction) {
+          var _cx;
+
+          return [props, {
+            children: /*#__PURE__*/React.createElement("div", {
+              className: "".concat(blockClass, "__actions-column-content")
+            }, isFetching && /*#__PURE__*/React.createElement(IconSkeleton, {
+              className: "".concat(blockClass, "__actions-column-loading")
+            }), !isFetching && /*#__PURE__*/React.createElement(OverflowMenu, {
+              size: "sm",
+              light: true,
+              flipped: true,
+              onClick: function onClick(e) {
+                return e.stopPropagation();
+              }
+            }, rowActions.map(function (action) {
+              var id = action.id,
+                  _onClick = action.onClick,
+                  shouldHideMenuItem = action.shouldHideMenuItem,
+                  shouldDisableMenuItem = action.shouldDisableMenuItem,
+                  disabled = action.disabled,
+                  rest = _objectWithoutProperties(action, _excluded);
+
+              var hidden = typeof shouldHideMenuItem === 'function' && shouldHideMenuItem(row); // shouldDisableMenuItem will override disabled because it's more specific
+              // if shouldDisableMenuItem doesn't exists, fall back to disabled
+
+              var isDisabledByRow = typeof shouldDisableMenuItem === 'function' ? shouldDisableMenuItem(row) : disabled;
+
+              if (hidden) {
+                return null;
+              }
+
+              return /*#__PURE__*/React.createElement(OverflowMenuItem, _extends({}, rest, {
+                disabled: isDisabledByRow,
+                onClick: function onClick(e) {
+                  e.stopPropagation();
+
+                  _onClick(id, row, e);
+                },
+                key: id
+              }));
+            }))),
+            className: cx((_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__actions-column-cell"), true), _defineProperty(_cx, "".concat(blockClass, "__cell"), true), _cx))
+          }];
+        }
+
+        return [props];
+      };
+
+      hooks.getCellProps.push(addActionsMenu);
+    }
+  };
+
+  hooks.useInstance.push(useAttachActionsOnInstance);
+};
+
+export default useActionsColumn;

package/es/components/Datagrid/useColumnRightAlign.js

@@ -0,0 +1,52 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+/*
+ * Licensed Materials - Property of IBM
+ * 5724-Q36
+ * (c) Copyright IBM Corp. 2020
+ * US Government Users Restricted Rights - Use, duplication or disclosure
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
+ */
+import React from 'react';
+import cx from 'classnames';
+import { pkg } from '../../settings';
+var blockClass = "".concat(pkg.prefix, "--datagrid");
+
+var useColumnRightAlign = function useColumnRightAlign(hooks) {
+  var RightAlignRenderer = function RightAlignRenderer(tableProps, column) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: cx("".concat(blockClass, "__right-align-cell-renderer"), {
+        sortDisabled: !tableProps.isTableSortable || tableProps.column.disableSortBy === true
+      })
+    }, column.Cell(tableProps));
+  };
+
+  var RightAlignHeader = function RightAlignHeader(headerProp, column) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "".concat(blockClass, "__right-align-header")
+    }, typeof column.Header === 'function' ? column.Header(headerProp) : column.Header);
+  };
+
+  var rightAlignedColumns = function rightAlignedColumns(columns) {
+    var columnsWithDefaultCells = columns.map(function (column) {
+      return _objectSpread(_objectSpread({}, column), {}, {
+        Cell: column.rightAlignedColumn ? function (tableProp) {
+          return RightAlignRenderer(tableProp, column);
+        } : column.Cell,
+        Header: column.rightAlignedColumn ? function (headerProp) {
+          return RightAlignHeader(headerProp, column);
+        } : column.Header
+      });
+    });
+    return _toConsumableArray(columnsWithDefaultCells);
+  };
+
+  hooks.visibleColumns.push(rightAlignedColumns);
+};
+
+export default useColumnRightAlign;

package/es/components/Datagrid/useCustomizeColumns.js

@@ -0,0 +1,45 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+// @flow
+
+/*
+ * Licensed Materials - Property of IBM
+ * 5724-Q36
+ * (c) Copyright IBM Corp. 2021
+ * US Government Users Restricted Rights - Use, duplication or disclosure
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
+ */
+import * as React from 'react';
+import { CustomizeColumnsModalWrapper, ToggleButtonWrapper } from './Datagrid/addons/CustomizeColumns';
+
+var useCustomizeColumns = function useCustomizeColumns(hooks) {
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isModalOpen = _React$useState2[0],
+      setIsModalOpen = _React$useState2[1];
+
+  hooks.useInstance.push(function (instance) {
+    var customizeColumnsProps = instance.customizeColumnsProps;
+    Object.assign(instance, {
+      customizeColumnsProps: _objectSpread(_objectSpread({}, customizeColumnsProps), {}, {
+        isModalOpen: isModalOpen,
+        setIsModalOpen: setIsModalOpen
+      }),
+      CustomizeColumnsButton: function CustomizeColumnsButton(props) {
+        return /*#__PURE__*/React.createElement(ToggleButtonWrapper, _extends({
+          isModalOpen: isModalOpen,
+          setIsModalOpen: setIsModalOpen
+        }, props));
+      },
+      CustomizeColumnsModal: CustomizeColumnsModalWrapper
+    });
+  });
+};
+
+export default useCustomizeColumns;

package/es/components/Datagrid/useDatagrid.js

@@ -0,0 +1,44 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+/*
+ * Licensed Materials - Property of IBM
+ * 5724-Q36
+ * (c) Copyright IBM Corp. 2020 - 2021
+ * US Government Users Restricted Rights - Use, duplication or disclosure
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
+ */
+import { useMemo } from 'react';
+import { useTable, useFlexLayout, useResizeColumns, useExpanded, useRowSelect, useSortBy, useGlobalFilter, useFilters, usePagination } from 'react-table';
+import uniqueId from 'lodash/uniqueId';
+import useSkeletonRows from './useSkeletonRows';
+import useDefaultStringRenderer from './useDefaultStringRenderer';
+import useRowRenderer from './useRowRenderer';
+import useRowSize from './useRowSize';
+import useHeaderRow from './Datagrid/DatagridHeaderRow';
+import useFlexResize from './useFlexResize';
+import useFloatingScroll from './useFloatingScroll';
+
+var useDatagrid = function useDatagrid(params) {
+  var defaultPlugins = [useFlexLayout, useHeaderRow, useSkeletonRows, useResizeColumns, useRowRenderer, useDefaultStringRenderer, useRowSize, useFilters, useGlobalFilter, useSortBy, useExpanded];
+  var defaultEndPlugins = [usePagination, useRowSelect, useFlexResize, useFloatingScroll];
+  var clientEndPlugins = params.endPlugins || [];
+  var tableId = useMemo(function () {
+    return uniqueId('datagrid-table-id');
+  }, []);
+
+  for (var _len = arguments.length, plugins = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    plugins[_key - 1] = arguments[_key];
+  }
+
+  var tableState = useTable.apply(void 0, [_objectSpread({
+    tableId: tableId
+  }, params)].concat(defaultPlugins, plugins, defaultEndPlugins, _toConsumableArray(clientEndPlugins)));
+  return tableState;
+};
+
+export default useDatagrid;

package/es/components/Datagrid/useDefaultStringRenderer.js

@@ -0,0 +1,48 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+/*
+ * Licensed Materials - Property of IBM
+ * 5724-Q36
+ * (c) Copyright IBM Corp. 2020
+ * US Government Users Restricted Rights - Use, duplication or disclosure
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
+ */
+import React from 'react';
+import { pkg } from '../../settings';
+var blockClass = "".concat(pkg.prefix, "--datagrid");
+
+var useDefaultStringRenderer = function useDefaultStringRenderer(hooks) {
+  var StringRenderer = function StringRenderer(tableProps) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "".concat(blockClass, "__defaultStringRenderer"),
+      title: tableProps.value
+    }, tableProps.value);
+  };
+
+  var HeaderRenderer = function HeaderRenderer(header) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "".concat(blockClass, "__defaultStringRenderer"),
+      title: typeof header === 'string' ? header : ''
+    }, header);
+  };
+
+  var visibleColumns = function visibleColumns(columns) {
+    var columnsWithDefaultCells = columns.map(function (column) {
+      return _objectSpread(_objectSpread({
+        Cell: StringRenderer
+      }, column), {}, {
+        Header: column.HeaderRenderer || HeaderRenderer(column.Header)
+      });
+    });
+    return _toConsumableArray(columnsWithDefaultCells);
+  };
+
+  hooks.visibleColumns.push(visibleColumns);
+};
+
+export default useDefaultStringRenderer;