@hitachivantara/uikit-react-lab 3.38.0

package/dist/modern/Table/hooks/useTable.js

@@ -0,0 +1,94 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["data", "columns"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import "core-js/modules/es.string.replace.js";
+import "core-js/modules/web.dom-collections.iterator.js";
+import { useMemo } from "react";
+import { useTable, usePagination, useExpanded, useSortBy, useResizeColumns } from "react-table";
+import useHvTableStyles from "./useTableStyles";
+
+const toTitleCase = str => {
+  return str.replace(/([^A-Z])([A-Z])/g, "$1 $2") // split cameCase
+  .replace(/[_-]+/g, " ") // split snake_case and lisp-case
+  .toLowerCase().replace(/(^\w|\b\w)/g, m => m.toUpperCase()) // title case words
+  .replace(/\s+/g, " ") // collapse repeated whitespace
+  .trim(); // remove leading/trailing whitespace
+};
+
+const useDefaultData = data => useMemo(() => {
+  return data || [];
+}, [data]);
+
+const useDefaultColumns = (columns, data) => useMemo(() => {
+  if (columns != null) {
+    return columns;
+  }
+
+  const uniqueKeys = Object.keys(Object.assign({}, ...data));
+  return uniqueKeys.filter(key => !["subRows", "subComponent"].includes(key)).map(key => ({
+    accessor: key,
+    Header: toTitleCase(key)
+  }));
+}, [columns, data]);
+
+const ensureCorePluginInstallation = (plugins, hvPluginName, corePluginToInstall) => {
+  const indexOfCorePlugin = plugins.findIndex(plugin => plugin.pluginName === corePluginToInstall.pluginName);
+  const indexOfHvPlugin = plugins.findIndex(plugin => plugin.pluginName === hvPluginName);
+
+  if (indexOfHvPlugin !== -1 && (indexOfCorePlugin === -1 || indexOfCorePlugin > indexOfHvPlugin)) {
+    if (indexOfCorePlugin > -1) {
+      plugins.splice(indexOfCorePlugin, 1);
+    }
+
+    plugins.splice(indexOfHvPlugin, 0, corePluginToInstall);
+  }
+};
+
+const useInstanceHook = instance => {
+  const {
+    rowsById
+  } = instance;
+  Object.assign(instance, {
+    initialRowsById: rowsById
+  });
+};
+
+const useHvTableSetup = hooks => {
+  hooks.useInstance.push(useInstanceHook);
+};
+
+useHvTableSetup.pluginName = "useHvTableSetup";
+
+const useHvTable = (props, ...plugins) => {
+  const {
+    data: dataProp,
+    columns: columnsProp
+  } = props,
+        others = _objectWithoutProperties(props, _excluded);
+
+  const data = useDefaultData(dataProp);
+  const columns = useDefaultColumns(columnsProp, data);
+  ensureCorePluginInstallation(plugins, "useHvPagination", usePagination);
+  ensureCorePluginInstallation(plugins, "useHvRowExpand", useExpanded);
+  ensureCorePluginInstallation(plugins, "useHvSortBy", useSortBy);
+  ensureCorePluginInstallation(plugins, "useHvResizeColumns", useResizeColumns);
+  const indexOfHvTableStylesPlugin = plugins.findIndex(plugin => plugin.pluginName === "useHvTableStyles");
+
+  if (indexOfHvTableStylesPlugin === -1) {
+    plugins.push(useHvTableStyles);
+  } // main hook call
+
+
+  return useTable(_objectSpread({
+    data,
+    columns
+  }, others), useHvTableSetup, ...plugins);
+};
+
+export default useHvTable;
+//# sourceMappingURL=useTable.js.map

package/dist/modern/Table/hooks/useTable.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/Table/hooks/useTable.js"],"names":["useMemo","useTable","usePagination","useExpanded","useSortBy","useResizeColumns","useHvTableStyles","toTitleCase","str","replace","toLowerCase","m","toUpperCase","trim","useDefaultData","data","useDefaultColumns","columns","uniqueKeys","Object","keys","assign","filter","key","includes","map","accessor","Header","ensureCorePluginInstallation","plugins","hvPluginName","corePluginToInstall","indexOfCorePlugin","findIndex","plugin","pluginName","indexOfHvPlugin","splice","useInstanceHook","instance","rowsById","initialRowsById","useHvTableSetup","hooks","useInstance","push","useHvTable","props","dataProp","columnsProp","others","indexOfHvTableStylesPlugin"],"mappings":"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","sourcesContent":["import { useMemo } from \"react\";\nimport { useTable, usePagination, useExpanded, useSortBy, useResizeColumns } from \"react-table\";\n\nimport useHvTableStyles from \"./useTableStyles\";\n\nconst toTitleCase = (str) => {\n  return str\n    .replace(/([^A-Z])([A-Z])/g, \"$1 $2\") // split cameCase\n    .replace(/[_-]+/g, \" \") // split snake_case and lisp-case\n    .toLowerCase()\n    .replace(/(^\\w|\\b\\w)/g, (m) => m.toUpperCase()) // title case words\n    .replace(/\\s+/g, \" \") // collapse repeated whitespace\n    .trim(); // remove leading/trailing whitespace\n};\n\nconst useDefaultData = (data) =>\n  useMemo(() => {\n    return data || [];\n  }, [data]);\n\nconst useDefaultColumns = (columns, data) =>\n  useMemo(() => {\n    if (columns != null) {\n      return columns;\n    }\n\n    const uniqueKeys = Object.keys(Object.assign({}, ...data));\n    return uniqueKeys\n      .filter((key) => ![\"subRows\", \"subComponent\"].includes(key))\n      .map((key) => ({\n        accessor: key,\n        Header: toTitleCase(key),\n      }));\n  }, [columns, data]);\n\nconst ensureCorePluginInstallation = (plugins, hvPluginName, corePluginToInstall) => {\n  const indexOfCorePlugin = plugins.findIndex(\n    (plugin) => plugin.pluginName === corePluginToInstall.pluginName\n  );\n  const indexOfHvPlugin = plugins.findIndex((plugin) => plugin.pluginName === hvPluginName);\n\n  if (indexOfHvPlugin !== -1 && (indexOfCorePlugin === -1 || indexOfCorePlugin > indexOfHvPlugin)) {\n    if (indexOfCorePlugin > -1) {\n      plugins.splice(indexOfCorePlugin, 1);\n    }\n\n    plugins.splice(indexOfHvPlugin, 0, corePluginToInstall);\n  }\n};\n\nconst useInstanceHook = (instance) => {\n  const { rowsById } = instance;\n\n  Object.assign(instance, {\n    initialRowsById: rowsById,\n  });\n};\n\nconst useHvTableSetup = (hooks) => {\n  hooks.useInstance.push(useInstanceHook);\n};\n\nuseHvTableSetup.pluginName = \"useHvTableSetup\";\n\nconst useHvTable = (props, ...plugins) => {\n  const { data: dataProp, columns: columnsProp, ...others } = props;\n\n  const data = useDefaultData(dataProp);\n  const columns = useDefaultColumns(columnsProp, data);\n\n  ensureCorePluginInstallation(plugins, \"useHvPagination\", usePagination);\n  ensureCorePluginInstallation(plugins, \"useHvRowExpand\", useExpanded);\n  ensureCorePluginInstallation(plugins, \"useHvSortBy\", useSortBy);\n  ensureCorePluginInstallation(plugins, \"useHvResizeColumns\", useResizeColumns);\n\n  const indexOfHvTableStylesPlugin = plugins.findIndex(\n    (plugin) => plugin.pluginName === \"useHvTableStyles\"\n  );\n  if (indexOfHvTableStylesPlugin === -1) {\n    plugins.push(useHvTableStyles);\n  }\n\n  // main hook call\n  return useTable(\n    {\n      data,\n      columns,\n      ...others,\n    },\n    useHvTableSetup,\n    ...plugins\n  );\n};\n\nexport default useHvTable;\n"],"file":"useTable.js"}

package/dist/modern/Table/hooks/useTableStyles.d.ts

@@ -0,0 +1,41 @@
+import { CSSProperties } from "react";
+import { Hooks } from "react-table";
+
+// table definition:
+export type UseHvTableStylesTableOptions = {
+  style?: CSSProperties;
+  className?: string;
+  classes?: Record<string, string>;
+};
+
+// column definition:
+export interface UseHvTableStylesColumnOptions {
+  variant?: "checkbox" | "expand" | "actions" | "default" | "none";
+  align?: "center" | "inherit" | "justify" | "left" | "right";
+
+  style?: CSSProperties;
+  className?: string;
+  classes?: Record<string, string>;
+
+  headerStyle?: CSSProperties;
+  headerClassName?: string;
+  headerClasses?: Record<string, string>;
+
+  cellStyle?: CSSProperties;
+  cellClassName?: string;
+  cellClasses?: Record<string, string>;
+}
+
+// PROPS:
+export interface UseHvTableStylesTableRowProps {
+  hover?: boolean;
+}
+
+export interface UseHvTableStylesTableCellProps {
+  variant?: "checkbox" | "expand" | "actions" | "default" | "none";
+  align?: "center" | "inherit" | "justify" | "left" | "right";
+}
+
+export default function useTableStyles<D extends object = Record<string, unknown>>(
+  hooks: Hooks<D>
+): void;

package/dist/modern/Table/hooks/useTableStyles.js

@@ -0,0 +1,99 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import clsx from "clsx"; // props target: <table>
+
+export const getTablePropsHook = (props, {
+  instance
+}) => {
+  const nextProps = {
+    component: instance.tableComponent
+  };
+
+  if (instance.style != null) {
+    nextProps.style = instance.style;
+  }
+
+  if (instance.className != null) {
+    nextProps.className = instance.className;
+  }
+
+  if (instance.classes != null) {
+    nextProps.classes = instance.classes;
+  }
+
+  return [props, nextProps];
+}; // props target: <table><thead><tr><th>
+
+export const getHeaderFooterPropsHook = (props, {
+  column
+}) => {
+  const nextProps = {
+    variant: column.variant,
+    align: column.align
+  };
+
+  if (column.style != null || column.headerStyle != null) {
+    nextProps.style = _objectSpread(_objectSpread(_objectSpread({}, props.style), column.style), column.headerStyle);
+  }
+
+  if (column.className != null || column.headerClassName != null) {
+    nextProps.className = clsx(props.className, column.className, column.headerClassName);
+  }
+
+  if (column.classes != null || column.headerClasses) {
+    nextProps.classes = _objectSpread(_objectSpread(_objectSpread({}, props.classes), column.classes), column.headerClasses);
+  }
+
+  return [props, nextProps];
+}; // props target: <table><tbody><tr>
+
+export const getRowPropsHook = props => {
+  const nextProps = {
+    hover: true
+  };
+  return [props, nextProps];
+}; // props target: <table><tbody><tr><td>
+
+export const getCellPropsHook = (props, {
+  cell
+}) => {
+  const nextProps = {
+    variant: cell.column.variant,
+    align: cell.column.align
+  };
+
+  if (cell.column.style != null || cell.column.cellStyle != null) {
+    nextProps.style = _objectSpread(_objectSpread(_objectSpread({}, props.style), cell.column.style), cell.column.cellStyle);
+  }
+
+  if (cell.column.className != null || cell.column.cellClassName != null) {
+    nextProps.className = clsx(props.className, cell.column.className, cell.column.cellClassName);
+  }
+
+  if (cell.column.classes != null || cell.column.cellClasses) {
+    nextProps.classes = _objectSpread(_objectSpread(_objectSpread({}, props.classes), cell.column.classes), cell.column.cellClasses);
+  }
+
+  return [props, nextProps];
+};
+
+const useTableStyles = hooks => {
+  // props target: <table>
+  hooks.getTableProps.push(getTablePropsHook); // props target: <table><thead><tr><th>
+
+  hooks.getHeaderProps.push(getHeaderFooterPropsHook); // props target: <table><tfoot><tr><td>
+
+  hooks.getFooterProps.push(getHeaderFooterPropsHook); // props target: <table><tbody><tr>
+
+  hooks.getRowProps.push(getRowPropsHook); // props target: <table><tbody><tr><td>
+
+  hooks.getCellProps.push(getCellPropsHook);
+};
+
+useTableStyles.pluginName = "useHvTableStyles";
+export default useTableStyles;
+//# sourceMappingURL=useTableStyles.js.map

package/dist/modern/Table/hooks/useTableStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/Table/hooks/useTableStyles.js"],"names":["clsx","getTablePropsHook","props","instance","nextProps","component","tableComponent","style","className","classes","getHeaderFooterPropsHook","column","variant","align","headerStyle","headerClassName","headerClasses","getRowPropsHook","hover","getCellPropsHook","cell","cellStyle","cellClassName","cellClasses","useTableStyles","hooks","getTableProps","push","getHeaderProps","getFooterProps","getRowProps","getCellProps","pluginName"],"mappings":"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","sourcesContent":["import clsx from \"clsx\";\n\n// props target: <table>\nexport const getTablePropsHook = (props, { instance }) => {\n  const nextProps = { component: instance.tableComponent };\n\n  if (instance.style != null) {\n    nextProps.style = instance.style;\n  }\n\n  if (instance.className != null) {\n    nextProps.className = instance.className;\n  }\n\n  if (instance.classes != null) {\n    nextProps.classes = instance.classes;\n  }\n\n  return [props, nextProps];\n};\n\n// props target: <table><thead><tr><th>\nexport const getHeaderFooterPropsHook = (props, { column }) => {\n  const nextProps = {\n    variant: column.variant,\n    align: column.align,\n  };\n\n  if (column.style != null || column.headerStyle != null) {\n    nextProps.style = { ...props.style, ...column.style, ...column.headerStyle };\n  }\n\n  if (column.className != null || column.headerClassName != null) {\n    nextProps.className = clsx(props.className, column.className, column.headerClassName);\n  }\n\n  if (column.classes != null || column.headerClasses) {\n    nextProps.classes = { ...props.classes, ...column.classes, ...column.headerClasses };\n  }\n\n  return [props, nextProps];\n};\n\n// props target: <table><tbody><tr>\nexport const getRowPropsHook = (props) => {\n  const nextProps = {\n    hover: true,\n  };\n\n  return [props, nextProps];\n};\n\n// props target: <table><tbody><tr><td>\nexport const getCellPropsHook = (props, { cell }) => {\n  const nextProps = {\n    variant: cell.column.variant,\n    align: cell.column.align,\n  };\n\n  if (cell.column.style != null || cell.column.cellStyle != null) {\n    nextProps.style = { ...props.style, ...cell.column.style, ...cell.column.cellStyle };\n  }\n\n  if (cell.column.className != null || cell.column.cellClassName != null) {\n    nextProps.className = clsx(props.className, cell.column.className, cell.column.cellClassName);\n  }\n\n  if (cell.column.classes != null || cell.column.cellClasses) {\n    nextProps.classes = { ...props.classes, ...cell.column.classes, ...cell.column.cellClasses };\n  }\n\n  return [props, nextProps];\n};\n\nconst useTableStyles = (hooks) => {\n  // props target: <table>\n  hooks.getTableProps.push(getTablePropsHook);\n  // props target: <table><thead><tr><th>\n  hooks.getHeaderProps.push(getHeaderFooterPropsHook);\n  // props target: <table><tfoot><tr><td>\n  hooks.getFooterProps.push(getHeaderFooterPropsHook);\n  // props target: <table><tbody><tr>\n  hooks.getRowProps.push(getRowPropsHook);\n  // props target: <table><tbody><tr><td>\n  hooks.getCellProps.push(getCellPropsHook);\n};\n\nuseTableStyles.pluginName = \"useHvTableStyles\";\n\nexport default useTableStyles;\n"],"file":"useTableStyles.js"}

package/dist/modern/Table/index.d.ts

@@ -0,0 +1,22 @@
+export { default } from "./Table";
+export * from "./Table";
+
+export { default as HvTableBody } from "./TableBody";
+export * from "./TableBody";
+
+export { default as HvTableCell } from "./TableCell";
+export * from "./TableCell";
+
+export { default as HvTableContainer } from "./TableContainer";
+export * from "./TableContainer";
+
+export { default as HvTableHead } from "./TableHead";
+export * from "./TableHead";
+
+export { default as HvTableHeader } from "./TableHeader";
+export * from "./TableHeader";
+
+export { default as HvTableRow } from "./TableRow";
+export * from "./TableRow";
+
+export * from "./hooks";

package/dist/modern/Table/index.js

@@ -0,0 +1,9 @@
+export { default } from "./Table";
+export { default as HvTableBody } from "./TableBody";
+export { default as HvTableCell } from "./TableCell";
+export { default as HvTableContainer } from "./TableContainer";
+export { default as HvTableHead } from "./TableHead";
+export { default as HvTableHeader } from "./TableHeader";
+export { default as HvTableRow } from "./TableRow";
+export * from "./hooks";
+//# sourceMappingURL=index.js.map

package/dist/modern/Table/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Table/index.js"],"names":["default","HvTableBody","HvTableCell","HvTableContainer","HvTableHead","HvTableHeader","HvTableRow"],"mappings":"AAAA,SAASA,OAAT,QAAwB,SAAxB;AACA,SAASA,OAAO,IAAIC,WAApB,QAAuC,aAAvC;AACA,SAASD,OAAO,IAAIE,WAApB,QAAuC,aAAvC;AACA,SAASF,OAAO,IAAIG,gBAApB,QAA4C,kBAA5C;AACA,SAASH,OAAO,IAAII,WAApB,QAAuC,aAAvC;AACA,SAASJ,OAAO,IAAIK,aAApB,QAAyC,eAAzC;AACA,SAASL,OAAO,IAAIM,UAApB,QAAsC,YAAtC;AAEA,cAAc,SAAd","sourcesContent":["export { default } from \"./Table\";\nexport { default as HvTableBody } from \"./TableBody\";\nexport { default as HvTableCell } from \"./TableCell\";\nexport { default as HvTableContainer } from \"./TableContainer\";\nexport { default as HvTableHead } from \"./TableHead\";\nexport { default as HvTableHeader } from \"./TableHeader\";\nexport { default as HvTableRow } from \"./TableRow\";\n\nexport * from \"./hooks\";\n"],"file":"index.js"}

package/dist/modern/Table/stories/TableHooks.stories.mdx

@@ -0,0 +1,278 @@
+import { Meta, Story, Preview } from "@storybook/addon-docs";
+
+import LinkTo from "@storybook/addon-links/react";
+
+import { Usage } from "storybook-root/blocks/Usage";
+
+import { HvTable } from "../..";
+
+import * as stories from "./TableHooks.stories.js";
+
+<Meta title="Lab/Table Hooks" />
+
+# Table hooks
+
+The UI Kit library provides a collection of **custom hooks** that ease the integration with the <LinkTo kind="Lab/Table" story="Main" className="sbdocs-a">HvTable elements</LinkTo> and allows more advanced use cases and better data handling.
+
+Our custom hooks are built on top of [React Table](https://react-table.tanstack.com) which is an "headless" UI utility library to build data tables while retaining control over markup and styles. It consists of a collection of, lightweight, composable and extensible custom React hooks.
+
+## `useHv*` hooks
+
+For further ease, you can use the provided `useHvTable` hook that wraps the [React Table's `useTable` hook](https://react-table.tanstack.com/docs/api/useTable) and
+provides the following functionality:
+
+- Ensures the use of the needed core and layout plugins when using any of the UI Kit custom hooks (e.g. adding `useHvPagination` implies the instalation of React Table's `usePagination` hook).
+- Automatically installs the `useHvTableStyles` hook.
+- Generates default column metadata from the data fields, if the `columns` option is missing.
+- Defaults to an empty array if no `data` is provided.
+
+<Usage>{'import { useHvTable } from "@hitachivantara/uikit-react-lab";'}</Usage>
+
+<Preview withToolbar>
+  <Story inline story={stories.UseHvTable} />
+</Preview>
+
+The following plugin hooks are available:
+
+- `useHvTableStyles`: ensures the correct styling of the table by injecting the column's `variant` and `align` options into the `HvTableHeader` and `HvTableCell` components (via `getHeaderProps` and `getCellProps`, respectively).
+  Also adds support for injecting the `styles`, `className` and `classes` into the `HvTable`, `HvTableHeader` and `HvTableCell` components.
+- `useHvPagination`: eases the wiring of the `HvPagination` component when using pagination. See <a href="#pagination" className="sbdocs-a">Pagination</a>.
+- `useHvRowSelection`: creates and manages the UI for selecting rows. See <a href="#selection" className="sbdocs-a">Selection</a>.
+- `useHvBulkActions`: eases the wiring of the `HvBulkActions` component. See <a href="#bulk-selection-and-actions" className="sbdocs-a">Bulk selection and actions</a>.
+- `useHvSortBy`: manages the table's header sorting functionality. See <a href="#sorting" className="sbdocs-a">Sorting</a>.
+- `useHvRowExpand`: manages the row expanding functionality. See <a href="#row-expanding" className="sbdocs-a">Row expanding</a>.
+- `useHvTableSticky`: allows defining sticky headers and columns. See <a href="#sticky-headers-and-columns" className="sbdocs-a">Sticky Headers And Columns</a>.
+- `useHvHeaderGroups`: allows defining grouped headers. See <a href="#grouped-headers" className="sbdocs-a">Grouped Headers</a>.
+
+## KitchenSink
+
+Complete sample table that uses most of the features provided.
+
+<Preview withToolbar>
+  <Story inline story={stories.KitchenSink} />
+</Preview>
+
+# Hooks usage
+
+## useHvPagination
+
+Data can be paginated. Optionally, empty lines can be added to the last page to avoid changes in height.
+
+Check [React Table's `usePagination` documentation](https://react-table.tanstack.com/docs/api/usePagination) for configuration details.
+
+The `useHvPagination` hook makes the `getHvPaginationProps` function available on the table instance returned that can be used to setup a `HvPagination` component.
+
+_Note: This hook depends on the `usePagination` hook from `react-table`, but when using `useHvTable` only `useHvPagination` needs to be installed._
+
+<Preview withToolbar>
+  <Story inline story={stories.Pagination} />
+</Preview>
+
+## useHvRowSelection
+
+Rows can be selected individually.
+
+Check [React Table's `useRowSelect` documentation](https://react-table.tanstack.com/docs/api/useRowSelect) for configuration details.
+
+The `useHvRowSelecion` hook injects a new column with a `HvCheckBox` to select each row. It also manages the `HvTableRow`'s `isSelected` property via the `getRowProps`.
+
+This hook is originally based on the code `useRowSelect` hook from `react-table` and implements its API, but extends it with support for locking the selection state of individual rows.
+
+<Preview withToolbar>
+  <Story inline story={stories.Selection} />
+</Preview>
+
+## useHvRowSelection controlled
+
+A selection state can also be included in the data and toggled externally.
+
+<Preview withToolbar>
+  <Story inline story={stories.ControlledSelection} />
+</Preview>
+
+## useHvBulkActions
+
+Rows can also be selected in bulk and actions can be performed on the current selection.
+
+The `useHvBulkActions` hook makes the `getHvBulkActionsProps` function available on the table instance returned that can be used to setup a `HvBulkActions` component.
+
+_Note: This hook depends on the `useRowSelect` hook from `react-table`, but when using `useHvTable` only `useHvBulkActions` needs to be installed._
+
+<Preview withToolbar>
+  <Story inline story={stories.BulkActions} />
+</Preview>
+
+## useHvSortBy
+
+Tables can have the capability of sorting the data by column.
+Clicking a sortable column header toggles between ascending or descending. Multiple sorting criteria is enabled through holding shift while clicking.
+
+Check [React Table's `useSortBy` documentation](https://react-table.tanstack.com/docs/api/useSortBy) for configuration details.
+
+The `useHvSortBy` hook ensures that the proper properties are injected in the `HvTableHeader` (including the on click sorting trigger) and `HvTableCell` (for styling).
+
+_Note: This hook depends on the `useSortBy` hook from `react-table`, but when using `useHvTable` only `useHvSortBy` needs to be installed._
+
+<Preview withToolbar>
+  <Story inline story={stories.Sortable} />
+</Preview>
+
+## useHvRowExpand
+
+Tables rows can have the capability of being expanded to show more details.
+
+Check [React Table's `useExpanded` documentation](https://react-table.tanstack.com/docs/api/useExpanded) for configuration details.
+
+The `useHvRowExpand` hook injects a `HvButton` into the first data column that toggles each row expansion. If the column has a custom renderer, an extra column is created instead.
+
+_Note: This hook depends on the `useExpanded` hook from `react-table`, but when using `useHvTable` only `useHvRowExpand` needs to be installed._
+
+<Preview withToolbar>
+  <Story inline story={stories.Expandable} />
+</Preview>
+
+## useGroupBy
+
+Tables rows can have the capability of being expanded to show more details.
+
+Check [React Table's `useGroupBy` documentation](https://react-table.tanstack.com/docs/api/useGroupBy) for configuration details.
+
+This example requires useHvRowExpand to show the grouped rows.
+
+<Preview withToolbar>
+  <Story inline story={stories.GroupBy} />
+</Preview>
+
+## useHvTableSticky
+
+The table headers can be fixed at the top, allowing it to keep always visible when table has vertical scrolling enabled.
+
+It is also possible to stick columns, either on the left or on the right, making them always visible when scrolling horizontally.
+
+This is implemented using the `useHvTableSticky` custom React Table hook provided by the UI Kit library.
+
+When using sticky columns, all column widths will be fixed and a non-table-element layout is applied.
+
+### Configuration
+
+The following options are supported via the main options object passed to `useTable(options)`:
+
+- `stickyHeader: Bool`
+  - Enables the sticky header
+
+The following options are supported on any `Column` object passed to the `columns` options in `useTable()`:
+
+- `sticky: "left" | "right"`
+  - Sticks this column to the defined side. Columns will be re-orderer if needed.
+- `width: Int`
+  - Defaults to 150
+  - Specifies the width for the column
+- `minWidth: Int`
+  - Defaults to 0
+  - Specifies the minimum width for the column
+
+### Usage
+
+The `getTableProps`, `getTableHeadProps`, `getHeaderGroupProps`, `getHeaderProps`, `getTableBodyProps`, `getRowProps` and `getCellProps` prop getters must be called and the properties injected into the corresponding elements.
+
+<Preview withToolbar>
+  <Story inline story={stories.StickyHeadersAndColumns} />
+</Preview>
+
+## useHvHeaderGroups
+
+The table columns can be grouped, allowing it to have header groups.
+
+Check [React Table's `useTable#column-options` documentation](https://react-table.tanstack.com/docs/api/useTable#column-options) for configuration details.
+
+This is implemented using the `useHvHeaderGroups` custom React Table hook provided by the UI Kit library.
+
+When using grouped columns, all header group columns text will be centered.
+
+### Configuration
+
+The following options are supported on any `Column` object passed to the `columns` options in `useTable()`:
+
+- `columns: Array<Column>`
+  - A nested array of columns. If defined, the column will act as a header group. Columns can be recursively nested as much as needed.
+
+### Usage
+
+The `getTableProps`, `getHeaderGroupProps`, `getHeaderProps`, `getTableBodyProps`, `getRowProps` and `getCellProps` prop getters must be called and the properties injected into the corresponding elements.
+
+<Preview withToolbar>
+  <Story inline story={stories.GroupedHeaders} />
+</Preview>
+
+# Other use cases
+
+## Empty Cells
+
+The absence of data within an individual cell in the table should be displayed as a `—` (_em dash_), according to Design System guidelines.
+
+This must be handled by the developer in the respective cell renderer, as it is an guideline and not a strict rule.
+Different use cases may require different solutions, like `N/A` or `0`. Empty cells should be avoided.
+
+<Preview withToolbar>
+  <Story inline story={stories.EmptyCells} />
+</Preview>
+
+## Locked Selection
+
+Individual rows can have its selection state locked (becoming either not selectable or not unselectable), disabling the selection checkbox and also preventing the bulk actions to change the row state.
+
+<Preview withToolbar>
+  <Story inline story={stories.LockedSelection} />
+</Preview>
+
+## Alternative Layout
+
+react-table provides some layout plugin hooks useful for instance when needing to virtualize rows and cells for performance or enabling user resizable tables/columns.
+They rely on the core column options `width`, `minWidth` and `maxWidth`, that are used to calculate column and cell widths.
+
+- `useBlockLayout` renders headers and cells as inline-block elements with explicit width.
+- `useAbsoluteLayout` renders headers and cells as absolutely positioned elements with explicit width.
+- `useFlexLayout` renders headers and cells as inline-block elements, with the `width` being used as the `flex-basis` and `flex-grow`.
+
+Note that not all built-in styles will apply when using any of the alternative layouts, so aditional styling might be needed to acomplish the same look.
+Also, styles affecting element's widths (`width`, `min-width`, `max-width` and flex properties) must be avoided and the core column options used instead.
+
+Most layouts work well with the default html table elements, keeping the semantics while loosing the table layout rules.
+Elements can be changed (to `div` or any other apropriate html element) by using the `component` property.
+
+`useGridLayout` implies a totally diferent dom structure and is currently not supported by the HvTable components.
+
+<Preview withToolbar>
+  <Story inline story={stories.AlternativeLayout} />
+</Preview>
+
+## Server Side
+
+<Preview withToolbar>
+  <Story inline story={stories.ServerSide} />
+</Preview>
+
+## Drag and Drop
+
+react-table has an example which integrates the react-dnd / react-beautiful-dnd libraries to provide drag and drop capability on lines.
+Please check the documentation of [react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd) in case you want to extend this example.
+
+This sample is not a clean react-beautiful-dnd implementation because it is applied to a table and requires some custom work to maintain the
+layout of the table line (and its cell contents) while dragging. Please check https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/patterns/tables.md
+for more information.
+
+This behavior does not match 100% the Design System guidelines, although it offers a solution which implements the behavior and adds an accessible way for
+doing the drag/drop operation via `SPACE + ARROW` Keys.
+
+<Preview withToolbar>
+  <Story inline story={stories.DragAndDrop} />
+</Preview>
+
+## Column Resize
+
+Columns can be resized using the useHvResizeColumn hook, which leverages the react-table capabilities. 
+Resize, although not an accessible functionality, it allows columns to be resizable via dragging column right border.
+
+<Preview withToolbar>
+  <Story inline story={stories.ColumnResize} />
+</Preview>

package/dist/modern/Table/styles.js

@@ -0,0 +1,28 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+const styles = theme => ({
+  root: _objectSpread(_objectSpread({
+    position: "relative",
+    width: "100%"
+  }, theme.hv.typography.normalText), {}, {
+    "table&": {
+      borderSpacing: 0
+    },
+    "& caption": _objectSpread(_objectSpread({}, theme.typography.normalText), {}, {
+      padding: theme.spacing("xs"),
+      textAlign: "left",
+      captionSide: "bottom"
+    })
+  }),
+  stickyHeader: {},
+  stickyColumns: {
+    backgroundColor: theme.hv.palette.atmosphere.atmo2
+  }
+});
+
+export default styles;
+//# sourceMappingURL=styles.js.map

package/dist/modern/Table/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Table/styles.js"],"names":["styles","theme","root","position","width","hv","typography","normalText","borderSpacing","padding","spacing","textAlign","captionSide","stickyHeader","stickyColumns","backgroundColor","palette","atmosphere","atmo2"],"mappings":";;;;;;AAAA,MAAMA,MAAM,GAAIC,KAAD,KAAY;AACzBC,EAAAA,IAAI;AACFC,IAAAA,QAAQ,EAAE,UADR;AAEFC,IAAAA,KAAK,EAAE;AAFL,KAICH,KAAK,CAACI,EAAN,CAASC,UAAT,CAAoBC,UAJrB;AAMF,cAAU;AACRC,MAAAA,aAAa,EAAE;AADP,KANR;AAUF,iDACKP,KAAK,CAACK,UAAN,CAAiBC,UADtB;AAEEE,MAAAA,OAAO,EAAER,KAAK,CAACS,OAAN,CAAc,IAAd,CAFX;AAGEC,MAAAA,SAAS,EAAE,MAHb;AAIEC,MAAAA,WAAW,EAAE;AAJf;AAVE,IADqB;AAkBzBC,EAAAA,YAAY,EAAE,EAlBW;AAmBzBC,EAAAA,aAAa,EAAE;AACbC,IAAAA,eAAe,EAAEd,KAAK,CAACI,EAAN,CAASW,OAAT,CAAiBC,UAAjB,CAA4BC;AADhC;AAnBU,CAAZ,CAAf;;AAwBA,eAAelB,MAAf","sourcesContent":["const styles = (theme) => ({\n  root: {\n    position: \"relative\",\n    width: \"100%\",\n\n    ...theme.hv.typography.normalText,\n\n    \"table&\": {\n      borderSpacing: 0,\n    },\n\n    \"& caption\": {\n      ...theme.typography.normalText,\n      padding: theme.spacing(\"xs\"),\n      textAlign: \"left\",\n      captionSide: \"bottom\",\n    },\n  },\n  stickyHeader: {},\n  stickyColumns: {\n    backgroundColor: theme.hv.palette.atmosphere.atmo2,\n  },\n});\n\nexport default styles;\n"],"file":"styles.js"}