@pingux/astro 1.27.0-alpha.14 → 1.27.0-alpha.16

package/lib/components/DataTable/DataTable.js

@@ -0,0 +1,431 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+var _excluded = ["children"],
+    _excluded2 = ["children"],
+    _excluded3 = ["item", "children", "hasActions"];
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, 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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import React, { forwardRef, useCallback, useMemo, useRef } from 'react';
+import { mergeProps } from '@react-aria/utils';
+import { FocusRing, useFocusRing } from '@react-aria/focus';
+import { VisuallyHidden } from '@react-aria/visually-hidden';
+import { layoutInfoToStyle, VirtualizerItem } from '@react-aria/virtualizer';
+import { useTableColumnResizeState, useTableState } from '@react-stately/table';
+import { useStyleProps } from '@react-spectrum/utils';
+import { TableLayout } from '@react-stately/layout';
+import { useTable, useTableCell, useTableColumnHeader, useTableHeaderRow, useTableRow, useTableRowGroup } from '@react-aria/table';
+import PropTypes from 'prop-types';
+import MenuDownIcon from 'mdi-react/MenuDownIcon';
+import MenuUpIcon from 'mdi-react/MenuUpIcon';
+import { DataTableContext, useDataTableContext } from '../../context/DataTableContext';
+import DataTableVirtualizer from './DataTableVirtualizer';
+import { useStatusClasses } from '../../hooks';
+import { Box, Icon, Loader } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var DEFAULT_HEADER_HEIGHT = {
+  medium: 34,
+  large: 37.5
+};
+var ROW_HEIGHTS = {
+  compact: {
+    medium: 32,
+    large: 40
+  },
+  regular: {
+    medium: 40,
+    large: 50
+  },
+  spacious: {
+    medium: 48,
+    large: 75
+  }
+};
+/**
+ * DataTable component using react aria Spectrum TableView
+ * Primarily utilizes [TableView](https://react-spectrum.adobe.com/react-spectrum/TableView.html)
+ * Cross platform state management react hook for DataTable
+ * Primarily utilizes [useTableState](https://react-spectrum.adobe.com/react-stately/useTableState.html)
+*/
+
+var DataTable = /*#__PURE__*/forwardRef(function (props, ref) {
+  var onAction = props.onAction;
+
+  var _useStyleProps = useStyleProps(props),
+      styleProps = _useStyleProps.styleProps;
+
+  var direction = 'ltr'; // useLocale override
+
+  var scale = 'large'; // useProvider override
+
+  var getDefaultWidth = useCallback();
+  var state = useTableState(_objectSpread({}, props));
+  var columnState = useTableColumnResizeState(_objectSpread(_objectSpread({}, props), {}, {
+    getDefaultWidth: getDefaultWidth
+  }), state.collection);
+  var domRef = useRef(ref);
+  var bodyRef = useRef();
+  var density = props.density || 'regular';
+  var layout = useMemo(function () {
+    return new TableLayout({
+      // If props.rowHeight is auto, then use estimated heights based on scale,
+      // otherwise use fixed heights.
+      rowHeight: props.overflowMode === 'wrap' ? null : ROW_HEIGHTS[density][scale],
+      estimatedRowHeight: props.overflowMode === 'wrap' ? ROW_HEIGHTS[density][scale] : null,
+      headingHeight: props.overflowMode === 'wrap' ? null : DEFAULT_HEADER_HEIGHT[scale],
+      estimatedHeadingHeight: props.overflowMode === 'wrap' ? DEFAULT_HEADER_HEIGHT[scale] : null
+    });
+  }, [props.overflowMode, scale, density]);
+  layout.collection = state.collection;
+  layout.getColumnWidth = columnState.getColumnWidth;
+
+  var _useTable = useTable(_objectSpread(_objectSpread({}, props), {}, {
+    isVirtualized: true,
+    layout: layout,
+    onRowAction: onAction
+  }), state, domRef),
+      gridProps = _useTable.gridProps; // This overrides collection view's renderWrapper to support DOM hierarchy.
+
+
+  var renderWrapper = function renderWrapper(parent, reusableView, children, renderChildren) {
+    var style = layoutInfoToStyle(reusableView.layoutInfo, direction, parent && parent.layoutInfo);
+
+    if (style.overflow === 'hidden') {
+      style.overflow = 'visible'; // needed to support position: sticky
+    }
+
+    if (reusableView.viewType === 'rowgroup') {
+      return ___EmotionJSX(TableRowGroup, {
+        key: reusableView.key,
+        style: style
+      }, renderChildren(children));
+    }
+
+    if (reusableView.viewType === 'header') {
+      return ___EmotionJSX(TableHeader, {
+        key: reusableView.key,
+        style: style
+      }, renderChildren(children));
+    }
+
+    if (reusableView.viewType === 'row') {
+      return ___EmotionJSX(TableRow, {
+        key: reusableView.key,
+        item: reusableView.content,
+        style: style,
+        hasActions: onAction
+      }, renderChildren(children));
+    }
+
+    if (reusableView.viewType === 'headerrow') {
+      return ___EmotionJSX(TableHeaderRow, {
+        key: reusableView.key,
+        style: style,
+        item: reusableView.content
+      }, renderChildren(children));
+    }
+
+    return ___EmotionJSX(VirtualizerItem, {
+      key: reusableView.key,
+      reusableView: reusableView,
+      parent: parent
+    });
+  };
+
+  var renderView = function renderView(type, item) {
+    switch (type) {
+      case 'header':
+      case 'rowgroup':
+      case 'row':
+      case 'headerrow':
+        return null;
+
+      case 'cell':
+        {
+          return ___EmotionJSX(TableCell, {
+            cell: item
+          });
+        }
+
+      case 'column':
+        return ___EmotionJSX(TableColumnHeader, {
+          column: item
+        });
+
+      case 'loader':
+        return ___EmotionJSX(CenteredWrapper, null, ___EmotionJSX(Loader, {
+          color: "accent.70",
+          "aria-label": state.collection.size > 0 ? 'loadingMore' : 'loading'
+        }));
+
+      default:
+        return null;
+    }
+  };
+
+  var viewport = useRef({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0
+  });
+  var onVisibleRectChange = useCallback(function (e) {
+    if (viewport.current.width === e.width && viewport.current.height === e.height) {
+      return;
+    }
+
+    viewport.current = e;
+  }, []);
+  return ___EmotionJSX(DataTableContext.Provider, {
+    value: {
+      state: state,
+      layout: layout,
+      columnState: columnState
+    }
+  }, ___EmotionJSX(DataTableVirtualizer, _extends({
+    style: {
+      whiteSpace: props.overflowMode === 'wrap' ? 'normal' : 'initial'
+    }
+  }, gridProps, styleProps, {
+    layout: layout,
+    collection: state.collection,
+    focusedKey: state.selectionManager.focusedKey,
+    renderView: renderView,
+    renderWrapper: renderWrapper,
+    setTableWidth: columnState.setTableWidth,
+    onVisibleRectChange: onVisibleRectChange,
+    domRef: domRef,
+    bodyRef: bodyRef,
+    getColumnWidth: columnState.getColumnWidth
+  })));
+});
+
+function TableHeader(_ref) {
+  var children = _ref.children,
+      otherProps = _objectWithoutProperties(_ref, _excluded);
+
+  var _useTableRowGroup = useTableRowGroup(),
+      rowGroupProps = _useTableRowGroup.rowGroupProps;
+
+  return ___EmotionJSX(Box, _extends({}, rowGroupProps, otherProps), children);
+}
+
+function TableColumnHeader(props) {
+  var _state$sortDescriptor, _state$sortDescriptor2;
+
+  var column = props.column;
+  var ref = useRef(null);
+
+  var _useDataTableContext = useDataTableContext(),
+      state = _useDataTableContext.state;
+
+  var _useTableColumnHeader = useTableColumnHeader({
+    node: column,
+    isVirtualized: true
+  }, state, ref),
+      columnHeaderProps = _useTableColumnHeader.columnHeaderProps;
+
+  var columnProps = column.props;
+  var arrowIcon = ((_state$sortDescriptor = state.sortDescriptor) === null || _state$sortDescriptor === void 0 ? void 0 : _state$sortDescriptor.direction) === 'ascending' && column.key === ((_state$sortDescriptor2 = state.sortDescriptor) === null || _state$sortDescriptor2 === void 0 ? void 0 : _state$sortDescriptor2.column) ? ___EmotionJSX(Icon, {
+    icon: MenuUpIcon
+  }) : ___EmotionJSX(Icon, {
+    icon: MenuDownIcon,
+    color: "active"
+  });
+  var allProps = [columnHeaderProps];
+
+  var _useStatusClasses = useStatusClasses(_defineProperty({
+    'is-column-sortable': columnProps.allowsSorting
+  }, "is-align-".concat(columnProps.align), columnProps.align)),
+      classNames = _useStatusClasses.classNames;
+
+  return ___EmotionJSX(FocusRing, {
+    focusRingClass: "is-key-focused",
+    focusClass: "is-click-focused"
+  }, ___EmotionJSX(Box, _extends({}, mergeProps.apply(void 0, allProps), {
+    ref: ref,
+    variant: "dataTable.tableHeadCell",
+    className: classNames
+  }), columnProps.hideHeader ? ___EmotionJSX(VisuallyHidden, null, column.rendered) : ___EmotionJSX(Box, null, column.rendered), columnProps.allowsSorting && ___EmotionJSX(Box, null, arrowIcon)));
+}
+
+function TableRowGroup(_ref2) {
+  var children = _ref2.children,
+      otherProps = _objectWithoutProperties(_ref2, _excluded2);
+
+  var _useTableRowGroup2 = useTableRowGroup(),
+      rowGroupProps = _useTableRowGroup2.rowGroupProps;
+
+  return ___EmotionJSX(Box, _extends({}, rowGroupProps, otherProps), children);
+}
+
+function TableRow(_ref3) {
+  var item = _ref3.item,
+      children = _ref3.children,
+      hasActions = _ref3.hasActions,
+      otherProps = _objectWithoutProperties(_ref3, _excluded3);
+
+  var ref = useRef();
+
+  var _useDataTableContext2 = useDataTableContext(),
+      state = _useDataTableContext2.state;
+
+  var _useTableRow = useTableRow({
+    node: item,
+    isVirtualized: true
+  }, state, ref),
+      rowProps = _useTableRow.rowProps;
+
+  var _useFocusRing = useFocusRing({
+    within: true
+  }),
+      isFocusVisibleWithin = _useFocusRing.isFocusVisible,
+      focusWithinProps = _useFocusRing.focusProps;
+
+  var _useFocusRing2 = useFocusRing(),
+      isFocusVisible = _useFocusRing2.isFocusVisible,
+      focusProps = _useFocusRing2.focusProps;
+
+  var props = mergeProps(rowProps, otherProps, focusWithinProps, focusProps);
+
+  var _useStatusClasses3 = useStatusClasses({
+    'is-row-focus-visible': isFocusVisible || isFocusVisibleWithin
+  }),
+      classNames = _useStatusClasses3.classNames;
+
+  return ___EmotionJSX(Box, _extends({}, props, {
+    ref: ref,
+    variant: "dataTable.tableRow",
+    className: classNames
+  }), children);
+}
+
+function TableHeaderRow(_ref4) {
+  var item = _ref4.item,
+      children = _ref4.children,
+      style = _ref4.style;
+
+  var _useDataTableContext3 = useDataTableContext(),
+      state = _useDataTableContext3.state;
+
+  var ref = useRef();
+
+  var _useTableHeaderRow = useTableHeaderRow({
+    node: item,
+    isVirtualized: true
+  }, state, ref),
+      rowProps = _useTableHeaderRow.rowProps;
+
+  return ___EmotionJSX(Box, _extends({}, rowProps, {
+    ref: ref,
+    style: style
+  }), children);
+}
+
+function TableCell(_ref5) {
+  var cell = _ref5.cell;
+
+  var _useDataTableContext4 = useDataTableContext(),
+      state = _useDataTableContext4.state;
+
+  var ref = useRef();
+  var columnProps = cell.column.props;
+
+  var _useTableCell = useTableCell({
+    node: cell,
+    isVirtualized: true
+  }, state, ref),
+      gridCellProps = _useTableCell.gridCellProps;
+
+  var _useStatusClasses4 = useStatusClasses(_defineProperty({}, "is-align-".concat(columnProps.align), columnProps.align)),
+      classNames = _useStatusClasses4.classNames;
+
+  return ___EmotionJSX(FocusRing, {
+    focusRingClass: "is-key-focused"
+  }, ___EmotionJSX(Box, _extends({}, gridCellProps, {
+    ref: ref,
+    variant: "dataTable.tableCell",
+    className: classNames
+  }), ___EmotionJSX(Box, {
+    variant: "dataTable.tableCellContents"
+  }, cell.rendered)));
+}
+
+function CenteredWrapper(_ref6) {
+  var children = _ref6.children;
+
+  var _useDataTableContext5 = useDataTableContext(),
+      state = _useDataTableContext5.state;
+
+  return ___EmotionJSX(Box, {
+    role: "row",
+    "aria-rowindex": state.collection.headerRows.length + state.collection.size + 1,
+    variant: "dataTable.tableCenteredWrapper"
+  }, ___EmotionJSX(Box, {
+    role: "rowheader",
+    "aria-colspan": state.collection.columns.length
+  }, children));
+}
+
+DataTable.propTypes = {
+  /**
+   * Sets the amount of vertical padding within each cell.
+   * density: 'compact' | 'regular' | 'spacious'
+   * @default 'regular'
+   */
+  density: PropTypes.string,
+
+  /**
+   * Sets the overflow behavior for the cell contents.
+   * overflowMode: 'wrap' | 'truncate'
+   * @default 'truncate'
+   */
+  overflowMode: PropTypes.string,
+
+  /** Handler that is called when a user performs an action on a row. */
+  onAction: PropTypes.func
+};
+TableCell.propTypes = {
+  cell: PropTypes.shape({
+    column: PropTypes.shape({
+      props: PropTypes.shape({
+        align: PropTypes.string
+      })
+    }),
+    parentKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    rendered: PropTypes.node
+  })
+};
+TableHeaderRow.propTypes = {
+  children: PropTypes.node,
+  item: PropTypes.shape({}),
+  style: PropTypes.shape({})
+};
+TableRow.propTypes = {
+  children: PropTypes.node,
+  hasActions: PropTypes.func,
+  item: PropTypes.shape({})
+};
+TableColumnHeader.propTypes = {
+  column: PropTypes.shape({
+    key: PropTypes.string,
+    props: PropTypes.shape({
+      align: PropTypes.string,
+      allowsSorting: PropTypes.bool,
+      hideHeader: PropTypes.bool
+    }),
+    rendered: PropTypes.node
+  })
+};
+export default DataTable;

package/lib/components/DataTable/DataTable.stories.js

@@ -0,0 +1,273 @@
+import _parseInt from "@babel/runtime-corejs3/core-js-stable/parse-int";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import _sortInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/sort";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
+import _keysInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/keys";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import { useAsyncList } from '@react-stately/data';
+import ApplicationIcon from 'mdi-react/ApplicationIcon';
+import { action } from '@storybook/addon-actions';
+import { faker } from '@faker-js/faker';
+import isChromatic from 'chromatic/isChromatic';
+import { DataTable, DataTableBody, DataTableCell, DataTableColumn, DataTableHeader, DataTableRow, DataTableChip, DataTableMenu, DataTableMultiLine } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'DataTable',
+  component: DataTable,
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  },
+  argTypes: {
+    density: {
+      control: {
+        type: 'radio',
+        options: ['compact', 'regular', 'spacious']
+      },
+      defaultValue: 'spacious'
+    },
+    overflowMode: {
+      control: {
+        type: 'radio',
+        options: ['truncate', 'wrap']
+      },
+      defaultValue: 'truncate'
+    },
+    width: {
+      defaultValue: '100%',
+      control: {
+        type: 'text'
+      }
+    },
+    height: {
+      defaultValue: 565,
+      control: {
+        type: 'number'
+      }
+    }
+  }
+};
+export var Default = function Default(args) {
+  var columns = [{
+    name: 'Country',
+    key: 'country'
+  }, {
+    name: 'Population',
+    key: 'population'
+  }, {
+    name: 'Continent',
+    key: 'continent'
+  }];
+  var rows = [{
+    id: 1,
+    country: 'USA',
+    population: '320,000,000',
+    continent: 'North America'
+  }, {
+    id: 2,
+    country: 'Canada',
+    population: '37,000,000',
+    continent: 'North America'
+  }, {
+    id: 3,
+    country: 'China',
+    population: '1,398,000,000',
+    continent: 'Asia'
+  }, {
+    id: 4,
+    country: 'France',
+    population: '67,000,000',
+    continent: 'Europe'
+  }];
+  return ___EmotionJSX(DataTable, _extends({}, args, {
+    "aria-label": "Static table"
+  }), ___EmotionJSX(DataTableHeader, {
+    columns: columns
+  }, function (column) {
+    return ___EmotionJSX(DataTableColumn, {
+      align: "center"
+    }, column.name);
+  }), ___EmotionJSX(DataTableBody, {
+    items: rows
+  }, function (item) {
+    return ___EmotionJSX(DataTableRow, null, function (columnKey) {
+      return ___EmotionJSX(DataTableCell, null, item[columnKey]);
+    });
+  }));
+};
+export var CustomContent = function CustomContent(args) {
+  /**
+   * isChromatic checks if the code is running in Chromatic environment
+   * @returns {Boolean}
+   * Source: https://www.chromatic.com/docs/ischromatic
+   * */
+  var chromatic = isChromatic();
+  var columns = [{
+    name: 'Name/ID',
+    key: 'name_id',
+    isSortable: true
+  }, {
+    name: 'Status',
+    key: 'status',
+    isSortable: false
+  }, {
+    name: 'Category',
+    key: 'category',
+    isSortable: false
+  }, {
+    name: 'Date Submitted',
+    key: 'date',
+    isSortable: true
+  }, {
+    name: 'Submitted By',
+    key: 'submitted_by',
+    isSortable: true
+  }, {
+    name: 'Menu',
+    key: 'menu',
+    isSortable: false
+  }];
+  var list = useAsyncList({
+    load: function load(_ref) {
+      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        var _context, _context2, _context3;
+
+        var signal, cursor, res, json, random, fakeData, tableData;
+        return _regeneratorRuntime.wrap(function _callee$(_context5) {
+          while (1) {
+            switch (_context5.prev = _context5.next) {
+              case 0:
+                signal = _ref.signal, cursor = _ref.cursor;
+
+                if (cursor) {
+                  // eslint-disable-next-line no-param-reassign
+                  cursor = cursor.replace(/^http:\/\//i, 'https://');
+                }
+
+                _context5.next = 4;
+                return fetch(cursor || 'https://pokeapi.co/api/v2/pokemon', {
+                  signal: signal
+                });
+
+              case 4:
+                res = _context5.sent;
+                _context5.next = 7;
+                return res.json();
+
+              case 7:
+                json = _context5.sent;
+
+                random = function random(items) {
+                  return items[Math.floor(Math.random() * items.length)];
+                };
+
+                fakeData = _mapInstanceProperty(_context = _concatInstanceProperty(_context2 = []).call(_context2, _keysInstanceProperty(_context3 = Array(json.results.length)).call(_context3))).call(_context, function (key) {
+                  var _context4;
+
+                  return {
+                    id: key,
+                    date: chromatic ? '2022-12-25' : "".concat(faker.date.past().toLocaleDateString('fr-CA')),
+                    category: chromatic ? 'Other' : "".concat(random(['App Catalog', 'Delete Environment', 'Other'])),
+                    status: ___EmotionJSX(DataTableChip, {
+                      cell: chromatic ? 'Pending' : "".concat(random(['Pending', 'Rejected', 'Approved', 'Failed']))
+                    }),
+                    submitted_by: chromatic ? 'John Doe' : _concatInstanceProperty(_context4 = "".concat(faker.name.firstName(), " ")).call(_context4, faker.name.lastName()),
+                    name_id: ___EmotionJSX(DataTableMultiLine, {
+                      cell: [{
+                        name: chromatic ? 'ACME' : "".concat(faker.company.name()),
+                        icon: ApplicationIcon,
+                        accountId: chromatic ? '123456789' : "".concat(faker.finance.routingNumber())
+                      }]
+                    }),
+                    menu: ___EmotionJSX(DataTableMenu, null)
+                  };
+                });
+                tableData = _mapInstanceProperty(fakeData).call(fakeData, function (item, i) {
+                  return _Object$assign({}, item, json.results[i]);
+                });
+                return _context5.abrupt("return", {
+                  items: tableData,
+                  cursor: json.next
+                });
+
+              case 12:
+              case "end":
+                return _context5.stop();
+            }
+          }
+        }, _callee);
+      }))();
+    },
+    sort: function sort(_ref2) {
+      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+        var items, sortDescriptor, cmp;
+        return _regeneratorRuntime.wrap(function _callee2$(_context7) {
+          while (1) {
+            switch (_context7.prev = _context7.next) {
+              case 0:
+                items = _ref2.items, sortDescriptor = _ref2.sortDescriptor;
+                return _context7.abrupt("return", {
+                  items: _sortInstanceProperty(items).call(items, function (a, b) {
+                    var _context6;
+
+                    var first = sortDescriptor.column !== 'name_id' ? a[sortDescriptor.column] : a[sortDescriptor.column].props.cell[0].name;
+                    var second = sortDescriptor.column !== 'name_id' ? b[sortDescriptor.column] : b[sortDescriptor.column].props.cell[0].name;
+
+                    if (_includesInstanceProperty(_context6 = sortDescriptor.column).call(_context6, 'date')) {
+                      cmp = new Date(first) < new Date(second) ? -1 : 1;
+                    } else {
+                      cmp = (_parseInt(first, 10) || first) < (_parseInt(second, 10) || second) ? -1 : 1;
+                    }
+
+                    if (sortDescriptor.direction === 'descending') {
+                      cmp *= -1;
+                    }
+
+                    return cmp;
+                  })
+                });
+
+              case 2:
+              case "end":
+                return _context7.stop();
+            }
+          }
+        }, _callee2);
+      }))();
+    }
+  });
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(DataTable, _extends({}, args, {
+    sortDescriptor: list.sortDescriptor,
+    onSortChange: _sortInstanceProperty(list),
+    "aria-label": "Custom content table",
+    onAction: action('onAction')
+  }), ___EmotionJSX(DataTableHeader, {
+    columns: columns
+  }, function (column) {
+    return ___EmotionJSX(DataTableColumn, {
+      width: // eslint-disable-next-line no-nested-ternary
+      column.key === 'name_id' ? '26.5%' : column.key === 'menu' ? '5%' : '16%',
+      align: column.key !== 'menu' ? 'start' : 'center',
+      allowsSorting: column.isSortable,
+      hideHeader: column.key === 'menu'
+    }, column.name);
+  }), ___EmotionJSX(DataTableBody, {
+    items: list.items,
+    loadingState: list.loadingState,
+    onLoadMore: list.loadMore
+  }, function (item) {
+    return ___EmotionJSX(DataTableRow, {
+      key: item.name
+    }, function (columnKey) {
+      return ___EmotionJSX(DataTableCell, null, item[columnKey]);
+    });
+  })));
+};