@dhis2-ui/table 10.16.3-alpha.1 → 10.16.4

package/build/es/data-table/data-table-column-header/data-table-column-header.js

@@ -12,66 +12,63 @@ const flexboxAlignLookup = {
   center: 'center',
   right: 'flex-end'
 };
-export const DataTableColumnHeader = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    align,
-    children,
-    className,
-    colSpan,
-    dataTest = 'dhis2-uicore-datatablecellhead',
-    filter,
-    fixed,
-    large,
-    left,
-    name,
-    role,
-    rowSpan,
-    scope,
-    showFilter,
-    sortDirection,
-    sortIconTitle,
-    top,
-    width,
-    onFilterIconClick,
-    onSortIconClick
-  } = _ref;
-  return /*#__PURE__*/React.createElement(TableHeaderCell, {
-    align: align,
-    className: cx(className, 'DataTableColumnHeader', resolvedTableHeaderCss.className),
-    colSpan: colSpan,
-    dataTest: dataTest,
-    fixed: fixed,
-    large: large,
-    left: left,
-    ref: ref,
-    rowSpan: rowSpan,
-    role: role,
-    scope: scope,
-    top: top,
-    width: width
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "jsx-3463223249 " + `jsx-${styles.__hash}` + " " + "container"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "jsx-3463223249 " + `jsx-${styles.__hash}` + " " + (cx('top', {
-      large
-    }) || "")
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "jsx-3463223249 " + `jsx-${styles.__hash}` + " " + "content"
-  }, children), sortDirection && /*#__PURE__*/React.createElement(Sorter, {
-    name: name,
-    sortDirection: sortDirection,
-    onClick: onSortIconClick,
-    title: sortIconTitle
-  }), filter && /*#__PURE__*/React.createElement(FilterHandle, {
-    name: name,
-    active: showFilter,
-    onClick: onFilterIconClick
-  })), showFilter && filter), resolvedTableHeaderCss.styles, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: styles.__hash
-  }, styles), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3463223249"
-  }, [`.label.jsx-3463223249{-webkit-box-pack:${flexboxAlignLookup[align]};-webkit-justify-content:${flexboxAlignLookup[align]};-ms-flex-pack:${flexboxAlignLookup[align]};justify-content:${flexboxAlignLookup[align]};}`]));
-});
+export const DataTableColumnHeader = /*#__PURE__*/forwardRef(({
+  align,
+  children,
+  className,
+  colSpan,
+  dataTest = 'dhis2-uicore-datatablecellhead',
+  filter,
+  fixed,
+  large,
+  left,
+  name,
+  role,
+  rowSpan,
+  scope,
+  showFilter,
+  sortDirection,
+  sortIconTitle,
+  top,
+  width,
+  onFilterIconClick,
+  onSortIconClick
+}, ref) => /*#__PURE__*/React.createElement(TableHeaderCell, {
+  align: align,
+  className: cx(className, 'DataTableColumnHeader', resolvedTableHeaderCss.className),
+  colSpan: colSpan,
+  dataTest: dataTest,
+  fixed: fixed,
+  large: large,
+  left: left,
+  ref: ref,
+  rowSpan: rowSpan,
+  role: role,
+  scope: scope,
+  top: top,
+  width: width
+}, /*#__PURE__*/React.createElement("span", {
+  className: "jsx-3463223249 " + `jsx-${styles.__hash}` + " " + "container"
+}, /*#__PURE__*/React.createElement("span", {
+  className: "jsx-3463223249 " + `jsx-${styles.__hash}` + " " + (cx('top', {
+    large
+  }) || "")
+}, /*#__PURE__*/React.createElement("span", {
+  className: "jsx-3463223249 " + `jsx-${styles.__hash}` + " " + "content"
+}, children), sortDirection && /*#__PURE__*/React.createElement(Sorter, {
+  name: name,
+  sortDirection: sortDirection,
+  onClick: onSortIconClick,
+  title: sortIconTitle
+}), filter && /*#__PURE__*/React.createElement(FilterHandle, {
+  name: name,
+  active: showFilter,
+  onClick: onFilterIconClick
+})), showFilter && filter), resolvedTableHeaderCss.styles, /*#__PURE__*/React.createElement(_JSXStyle, {
+  id: styles.__hash
+}, styles), /*#__PURE__*/React.createElement(_JSXStyle, {
+  id: "3463223249"
+}, [`.label.jsx-3463223249{-webkit-box-pack:${flexboxAlignLookup[align]};-webkit-justify-content:${flexboxAlignLookup[align]};-ms-flex-pack:${flexboxAlignLookup[align]};justify-content:${flexboxAlignLookup[align]};}`])));
 DataTableColumnHeader.displayName = 'DataTableColumnHeader';
 DataTableColumnHeader.propTypes = {
   align: PropTypes.oneOf(['left', 'center', 'right']),

package/build/es/data-table/data-table-column-header/filter-handle.js

@@ -4,12 +4,11 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import i18n from '../../locales/index.js';
 import { TableHeaderCellAction } from '../table-elements/index.js';
-export const FilterHandle = _ref => {
-  let {
-    active,
-    name,
-    onClick
-  } = _ref;
+export const FilterHandle = ({
+  active,
+  name,
+  onClick
+}) => {
   const filterIconColor = active ? colors.blue700 : colors.grey600;
   const clickHandler = onClick ? event => {
     onClick({

package/build/es/data-table/data-table-column-header/sorter.js

@@ -14,13 +14,12 @@ export const getNextSortDirection = currentDirection => {
   const nextIndex = (currentIndex + 1) % SORT_DIRECTIONS.length;
   return SORT_DIRECTIONS[nextIndex];
 };
-export const Sorter = _ref => {
-  let {
-    name,
-    sortDirection,
-    title,
-    onClick
-  } = _ref;
+export const Sorter = ({
+  name,
+  sortDirection,
+  title,
+  onClick
+}) => {
   const nextSortDirection = getNextSortDirection(sortDirection);
   const clickHandler = onClick ? event => {
     onClick({

package/build/es/data-table/data-table-row/data-table-row.js

@@ -8,19 +8,18 @@ import resolvedCss from './data-table-row.styles.js';
 import { DragHandleCell } from './drag-handle-cell.js';
 import { ExpandHandleCell } from './expand-handle-cell.js';
 import { ExpandedRow } from './expanded-row.js';
-export const DataTableRow = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    children,
-    className,
-    dataTest = 'dhis2-uicore-datatablerow',
-    expandableContent,
-    expanded,
-    selected,
-    draggable,
-    role,
-    onExpandToggle,
-    ...rest
-  } = _ref;
+export const DataTableRow = /*#__PURE__*/forwardRef(({
+  children,
+  className,
+  dataTest = 'dhis2-uicore-datatablerow',
+  expandableContent,
+  expanded,
+  selected,
+  draggable,
+  role,
+  onExpandToggle,
+  ...rest
+}, ref) => {
   const [isHoveringExpandedContent, setIsHoveringExpandedContent] = useState(false);
   const classes = cx(className, resolvedCss.className, {
     expanded,

package/build/es/data-table/data-table-row/expand-handle-cell.js

@@ -10,21 +10,18 @@ const pointer = {
   }, ["td.jsx-927553068{cursor:pointer;}"]),
   className: "jsx-927553068"
 };
-export const ExpandHandleCell = _ref => {
-  let {
-    expanded,
-    onClick
-  } = _ref;
-  return /*#__PURE__*/React.createElement(TableDataCell, {
-    className: cx(pointer.className, {
-      expanded
-    }),
-    onClick: () => onClick({
-      expanded: !expanded
-    }),
-    width: "48px"
-  }, expanded ? /*#__PURE__*/React.createElement(IconChevronUp24, null) : /*#__PURE__*/React.createElement(IconChevronDown24, null), pointer.styles);
-};
+export const ExpandHandleCell = ({
+  expanded,
+  onClick
+}) => /*#__PURE__*/React.createElement(TableDataCell, {
+  className: cx(pointer.className, {
+    expanded
+  }),
+  onClick: () => onClick({
+    expanded: !expanded
+  }),
+  width: "48px"
+}, expanded ? /*#__PURE__*/React.createElement(IconChevronUp24, null) : /*#__PURE__*/React.createElement(IconChevronDown24, null), pointer.styles);
 ExpandHandleCell.propTypes = {
   expanded: PropTypes.bool,
   onClick: PropTypes.func

package/build/es/data-table/data-table-row/expanded-row.js

@@ -13,28 +13,25 @@ const {
   }, [`tr.expanded:hover+tr>td.jsx-626485122{background-color:${colors.grey100};}`, `tr.expanded:active+tr>td.jsx-626485122{background-color:${colors.grey200};}`, "tr.selected.expanded:hover+tr.jsx-626485122>td.jsx-626485122{background-color:#cdeae8;}"]),
   className: "jsx-626485122"
 };
-export const ExpandedRow = _ref => {
-  let {
-    children,
-    className,
-    colSpan,
-    dataTest,
-    selected,
-    setIsHoveringExpandedContent
-  } = _ref;
-  return /*#__PURE__*/React.createElement(TableRow, {
-    onMouseOver: () => setIsHoveringExpandedContent(true),
-    onMouseOut: () => setIsHoveringExpandedContent(false),
-    className: cx({
-      [`${className}-expandedrow`]: !!className
-    }),
-    selected: selected,
-    dataTest: dataTest && `${dataTest}-expandedrow`
-  }, /*#__PURE__*/React.createElement(TableDataCell, {
-    className: cellClassName,
-    colSpan: colSpan
-  }, children, styles));
-};
+export const ExpandedRow = ({
+  children,
+  className,
+  colSpan,
+  dataTest,
+  selected,
+  setIsHoveringExpandedContent
+}) => /*#__PURE__*/React.createElement(TableRow, {
+  onMouseOver: () => setIsHoveringExpandedContent(true),
+  onMouseOut: () => setIsHoveringExpandedContent(false),
+  className: cx({
+    [`${className}-expandedrow`]: !!className
+  }),
+  selected: selected,
+  dataTest: dataTest && `${dataTest}-expandedrow`
+}, /*#__PURE__*/React.createElement(TableDataCell, {
+  className: cellClassName,
+  colSpan: colSpan
+}, children, styles));
 ExpandedRow.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,

package/build/es/data-table/data-table.js

@@ -2,17 +2,16 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React, { forwardRef } from 'react';
 import { Table, TableScrollBox } from './table-elements/index.js';
-export const DataTable = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    children,
-    className,
-    dataTest = 'dhis2-uicore-datatable',
-    layout = 'auto',
-    role,
-    scrollHeight,
-    scrollWidth,
-    width = '100%'
-  } = _ref;
+export const DataTable = /*#__PURE__*/forwardRef(({
+  children,
+  className,
+  dataTest = 'dhis2-uicore-datatable',
+  layout = 'auto',
+  role,
+  scrollHeight,
+  scrollWidth,
+  width = '100%'
+}, ref) => {
   const scrollable = !!(scrollHeight || scrollWidth);
   const table = /*#__PURE__*/React.createElement(Table, {
     borderless: scrollable,

package/build/es/data-table/data-table.prod.stories.js

@@ -74,70 +74,67 @@ export default {
     }
   }
 };
-const BasicTemplate = _ref => {
-  let {
-    bordered,
-    large,
-    draggable,
-    bodyProps,
-    ...args
-  } = _ref;
-  return /*#__PURE__*/React.createElement(DataTable, args, /*#__PURE__*/React.createElement(DataTableHead, null, /*#__PURE__*/React.createElement(DataTableRow, null, draggable && /*#__PURE__*/React.createElement(DataTableColumnHeader, {
-    large: large
-  }), /*#__PURE__*/React.createElement(DataTableColumnHeader, {
-    large: large
-  }, "First name"), /*#__PURE__*/React.createElement(DataTableColumnHeader, {
-    large: large
-  }, "Last name"), /*#__PURE__*/React.createElement(DataTableColumnHeader, {
-    large: large
-  }, "Incident date"), /*#__PURE__*/React.createElement(DataTableColumnHeader, {
-    large: large
-  }, "Last updated"))), /*#__PURE__*/React.createElement(DataTableBody, bodyProps, /*#__PURE__*/React.createElement(DataTableRow, {
-    draggable: draggable
-  }, /*#__PURE__*/React.createElement(DataTableCell, {
-    large: large,
-    bordered: bordered
-  }, "Onyekachukwu"), /*#__PURE__*/React.createElement(DataTableCell, {
-    large: large,
-    bordered: bordered
-  }, "Kariuki"), /*#__PURE__*/React.createElement(DataTableCell, {
-    large: large,
-    bordered: bordered
-  }, "02/06/2007"), /*#__PURE__*/React.createElement(DataTableCell, {
-    large: large,
-    bordered: bordered
-  }, "05/25/1972")), /*#__PURE__*/React.createElement(DataTableRow, {
-    draggable: draggable
-  }, /*#__PURE__*/React.createElement(DataTableCell, {
-    large: large,
-    bordered: bordered
-  }, "Kwasi"), /*#__PURE__*/React.createElement(DataTableCell, {
-    large: large,
-    bordered: bordered
-  }, "Okafor"), /*#__PURE__*/React.createElement(DataTableCell, {
-    large: large,
-    bordered: bordered
-  }, "08/11/2010"), /*#__PURE__*/React.createElement(DataTableCell, {
-    large: large,
-    bordered: bordered
-  }, "02/26/1991")), /*#__PURE__*/React.createElement(DataTableRow, {
-    draggable: draggable
-  }, /*#__PURE__*/React.createElement(DataTableCell, {
-    large: large,
-    bordered: bordered
-  }, "Siyabonga"), /*#__PURE__*/React.createElement(DataTableCell, {
-    large: large,
-    bordered: bordered
-  }, "Abiodun"), /*#__PURE__*/React.createElement(DataTableCell, {
-    large: large,
-    bordered: bordered
-  }, "07/21/1981"), /*#__PURE__*/React.createElement(DataTableCell, {
-    large: large,
-    bordered: bordered
-  }, "02/06/2007"))), /*#__PURE__*/React.createElement(DataTableFoot, null, /*#__PURE__*/React.createElement(DataTableRow, null, /*#__PURE__*/React.createElement(DataTableCell, {
-    colSpan: draggable ? '5' : '4'
-  }, "Footer content"))));
-};
+const BasicTemplate = ({
+  bordered,
+  large,
+  draggable,
+  bodyProps,
+  ...args
+}) => /*#__PURE__*/React.createElement(DataTable, args, /*#__PURE__*/React.createElement(DataTableHead, null, /*#__PURE__*/React.createElement(DataTableRow, null, draggable && /*#__PURE__*/React.createElement(DataTableColumnHeader, {
+  large: large
+}), /*#__PURE__*/React.createElement(DataTableColumnHeader, {
+  large: large
+}, "First name"), /*#__PURE__*/React.createElement(DataTableColumnHeader, {
+  large: large
+}, "Last name"), /*#__PURE__*/React.createElement(DataTableColumnHeader, {
+  large: large
+}, "Incident date"), /*#__PURE__*/React.createElement(DataTableColumnHeader, {
+  large: large
+}, "Last updated"))), /*#__PURE__*/React.createElement(DataTableBody, bodyProps, /*#__PURE__*/React.createElement(DataTableRow, {
+  draggable: draggable
+}, /*#__PURE__*/React.createElement(DataTableCell, {
+  large: large,
+  bordered: bordered
+}, "Onyekachukwu"), /*#__PURE__*/React.createElement(DataTableCell, {
+  large: large,
+  bordered: bordered
+}, "Kariuki"), /*#__PURE__*/React.createElement(DataTableCell, {
+  large: large,
+  bordered: bordered
+}, "02/06/2007"), /*#__PURE__*/React.createElement(DataTableCell, {
+  large: large,
+  bordered: bordered
+}, "05/25/1972")), /*#__PURE__*/React.createElement(DataTableRow, {
+  draggable: draggable
+}, /*#__PURE__*/React.createElement(DataTableCell, {
+  large: large,
+  bordered: bordered
+}, "Kwasi"), /*#__PURE__*/React.createElement(DataTableCell, {
+  large: large,
+  bordered: bordered
+}, "Okafor"), /*#__PURE__*/React.createElement(DataTableCell, {
+  large: large,
+  bordered: bordered
+}, "08/11/2010"), /*#__PURE__*/React.createElement(DataTableCell, {
+  large: large,
+  bordered: bordered
+}, "02/26/1991")), /*#__PURE__*/React.createElement(DataTableRow, {
+  draggable: draggable
+}, /*#__PURE__*/React.createElement(DataTableCell, {
+  large: large,
+  bordered: bordered
+}, "Siyabonga"), /*#__PURE__*/React.createElement(DataTableCell, {
+  large: large,
+  bordered: bordered
+}, "Abiodun"), /*#__PURE__*/React.createElement(DataTableCell, {
+  large: large,
+  bordered: bordered
+}, "07/21/1981"), /*#__PURE__*/React.createElement(DataTableCell, {
+  large: large,
+  bordered: bordered
+}, "02/06/2007"))), /*#__PURE__*/React.createElement(DataTableFoot, null, /*#__PURE__*/React.createElement(DataTableRow, null, /*#__PURE__*/React.createElement(DataTableCell, {
+  colSpan: draggable ? '5' : '4'
+}, "Footer content"))));
 export const Default = BasicTemplate.bind({});
 Default.args = {};
 export const Loading = BasicTemplate.bind({});
@@ -239,20 +236,18 @@ const SelectableRowsTemplate = args => {
   const [selected, setSelected] = useState({
     id_2: true
   });
-  const toggleSelected = _ref2 => {
-    let {
-      value,
-      checked
-    } = _ref2;
+  const toggleSelected = ({
+    value,
+    checked
+  }) => {
     setSelected({
       ...selected,
       [value]: checked
     });
   };
-  const toggleAll = _ref3 => {
-    let {
-      checked
-    } = _ref3;
+  const toggleAll = ({
+    checked
+  }) => {
     setSelected({
       id_1: checked,
       id_2: checked,
@@ -599,11 +594,10 @@ const ColumnHeaderSortingTemplate = args => {
     direction: 'default'
   });
   const getSortDirection = columnName => columnName === column ? direction : 'default';
-  const onSortIconClick = _ref4 => {
-    let {
-      name,
-      direction
-    } = _ref4;
+  const onSortIconClick = ({
+    name,
+    direction
+  }) => {
     setSortInstructions({
       column: name,
       direction
@@ -629,15 +623,12 @@ const ColumnHeaderSortingTemplate = args => {
       return 1;
     }
     return 0;
-  }).map(_ref5 => {
-    let {
-      firstName,
-      lastName
-    } = _ref5;
-    return /*#__PURE__*/React.createElement(DataTableRow, {
-      key: firstName + lastName
-    }, /*#__PURE__*/React.createElement(DataTableCell, null, firstName), /*#__PURE__*/React.createElement(DataTableCell, null, lastName));
-  })));
+  }).map(({
+    firstName,
+    lastName
+  }) => /*#__PURE__*/React.createElement(DataTableRow, {
+    key: firstName + lastName
+  }, /*#__PURE__*/React.createElement(DataTableCell, null, firstName), /*#__PURE__*/React.createElement(DataTableCell, null, lastName)))));
 };
 export const ColumnHeaderSorting = ColumnHeaderSortingTemplate.bind({});
 ColumnHeaderSorting.args = {};
@@ -659,20 +650,18 @@ const InlineFilteringTemplate = args => {
     column: null,
     value: ''
   });
-  const onFilterIconClick = _ref6 => {
-    let {
-      name,
-      show
-    } = _ref6;
+  const onFilterIconClick = ({
+    name,
+    show
+  }) => {
     setFilter({
       column: show ? name : null,
       value: ''
     });
   };
-  const onFilterInputChange = _ref7 => {
-    let {
-      value
-    } = _ref7;
+  const onFilterInputChange = ({
+    value
+  }) => {
     setFilter({
       column: column,
       value
@@ -703,60 +692,54 @@ const InlineFilteringTemplate = args => {
       return true;
     }
     return row[column].toUpperCase().includes(value.toUpperCase());
-  }).map(_ref8 => {
-    let {
-      firstName,
-      lastName
-    } = _ref8;
-    return /*#__PURE__*/React.createElement(DataTableRow, {
-      key: firstName + lastName
-    }, /*#__PURE__*/React.createElement(DataTableCell, null, firstName), /*#__PURE__*/React.createElement(DataTableCell, null, lastName));
-  })));
+  }).map(({
+    firstName,
+    lastName
+  }) => /*#__PURE__*/React.createElement(DataTableRow, {
+    key: firstName + lastName
+  }, /*#__PURE__*/React.createElement(DataTableCell, null, firstName), /*#__PURE__*/React.createElement(DataTableCell, null, lastName)))));
 };
 export const InlineFiltering = InlineFilteringTemplate.bind({});
 InlineFiltering.args = {
   layout: 'fixed'
 };
-const LongCellContentTemplate = _ref9 => {
-  let {
-    large
-  } = _ref9;
-  return /*#__PURE__*/React.createElement(DataTable, null, /*#__PURE__*/React.createElement(DataTableHead, null, /*#__PURE__*/React.createElement(DataTableRow, null, /*#__PURE__*/React.createElement(DataTableColumnHeader, {
-    large: large,
-    onSortIconClick: () => {},
-    sortDirection: "asc",
-    name: "first"
-  }, "FIRST - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?"), /*#__PURE__*/React.createElement(DataTableColumnHeader, {
-    large: large,
-    onFilterIconClick: () => {},
+const LongCellContentTemplate = ({
+  large
+}) => /*#__PURE__*/React.createElement(DataTable, null, /*#__PURE__*/React.createElement(DataTableHead, null, /*#__PURE__*/React.createElement(DataTableRow, null, /*#__PURE__*/React.createElement(DataTableColumnHeader, {
+  large: large,
+  onSortIconClick: () => {},
+  sortDirection: "asc",
+  name: "first"
+}, "FIRST - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?"), /*#__PURE__*/React.createElement(DataTableColumnHeader, {
+  large: large,
+  onFilterIconClick: () => {},
+  name: "firstName",
+  showFilter: true,
+  filter: /*#__PURE__*/React.createElement(Input, {
+    dense: true,
+    onChange: () => {},
     name: "firstName",
-    showFilter: true,
-    filter: /*#__PURE__*/React.createElement(Input, {
-      dense: true,
-      onChange: () => {},
-      name: "firstName",
-      value: "Filter value"
-    })
-  }, "SECOND - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?"), /*#__PURE__*/React.createElement(DataTableColumnHeader, {
-    large: large,
-    onSortIconClick: () => {},
-    sortDirection: "asc",
-    name: "third"
-  }, "Third (short)"), /*#__PURE__*/React.createElement(DataTableColumnHeader, {
-    large: large,
-    onSortIconClick: () => {},
-    sortDirection: "asc",
-    name: "fourth"
-  }, "Fourth - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?"))), /*#__PURE__*/React.createElement(DataTableBody, null, /*#__PURE__*/React.createElement(DataTableRow, null, /*#__PURE__*/React.createElement(DataTableCell, {
-    large: large
-  }, "FIRST - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?"), /*#__PURE__*/React.createElement(DataTableCell, {
-    large: large
-  }, "SECOND - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?"), /*#__PURE__*/React.createElement(DataTableCell, {
-    large: large
-  }, "Third (short)"), /*#__PURE__*/React.createElement(DataTableCell, {
-    large: large
-  }, "Fourth - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?"))));
-};
+    value: "Filter value"
+  })
+}, "SECOND - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?"), /*#__PURE__*/React.createElement(DataTableColumnHeader, {
+  large: large,
+  onSortIconClick: () => {},
+  sortDirection: "asc",
+  name: "third"
+}, "Third (short)"), /*#__PURE__*/React.createElement(DataTableColumnHeader, {
+  large: large,
+  onSortIconClick: () => {},
+  sortDirection: "asc",
+  name: "fourth"
+}, "Fourth - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?"))), /*#__PURE__*/React.createElement(DataTableBody, null, /*#__PURE__*/React.createElement(DataTableRow, null, /*#__PURE__*/React.createElement(DataTableCell, {
+  large: large
+}, "FIRST - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?"), /*#__PURE__*/React.createElement(DataTableCell, {
+  large: large
+}, "SECOND - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?"), /*#__PURE__*/React.createElement(DataTableCell, {
+  large: large
+}, "Third (short)"), /*#__PURE__*/React.createElement(DataTableCell, {
+  large: large
+}, "Fourth - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores quasi cupiditate. Voluptatum ducimus voluptates voluptas?"))));
 export const LongCellContent = LongCellContentTemplate.bind({});
 export const LongCellContentLargeCells = LongCellContentTemplate.bind({});
 LongCellContentLargeCells.args = {