@pantheon-systems/design-toolkit-react/dist/Tables/Table.js

Pantheon's React Design Toolkit

import _defineProperty from '@babel/runtime/helpers/defineProperty';
import { faCaretDown, faCaretUp } from '@fortawesome/pro-solid-svg-icons';
import PropTypes from 'prop-types';
import Icon from '../Icons/Icon.js';
import { jsxs, jsx } from 'react/jsx-runtime';

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; }
var Table = function Table(_ref) {
  var className = _ref.className,
    columnsLength = _ref.columnsLength,
    getTableProps = _ref.getTableProps,
    getTableBodyProps = _ref.getTableBodyProps,
    headerGroups = _ref.headerGroups,
    noDataMessage = _ref.noDataMessage,
    prepareRow = _ref.prepareRow,
    rows = _ref.rows;
  return /*#__PURE__*/jsxs("table", _objectSpread(_objectSpread({}, getTableProps()), {}, {
    className: "w-full border-collapse text-md table-button-styles ".concat(className),
    children: [/*#__PURE__*/jsx("thead", {
      children: headerGroups.map(function (headerGroup) {
        return /*#__PURE__*/jsx("tr", _objectSpread(_objectSpread({}, headerGroup.getHeaderGroupProps()), {}, {
          children: headerGroup.headers.map(function (column) {
            var headerProps = column.canSort ? column.getHeaderProps(column.getSortByToggleProps()) : column.getHeaderProps();
            return /*#__PURE__*/jsx("th", _objectSpread(_objectSpread({}, headerProps), {}, {
              className: "uppercase text-left text-gray-5 border-b-2 border-gray-2 py-4 px-2",
              children: /*#__PURE__*/jsxs("span", {
                className: column.canSort ? 'relative' : undefined,
                children: [column.render('Header'), column.isSorted && /*#__PURE__*/jsx("span", {
                  className: "absolute -right-4 top-1/2 transform -translate-y-1/2",
                  children: column.isSortedDesc ? /*#__PURE__*/jsx(Icon, {
                    icon: faCaretDown
                  }) : /*#__PURE__*/jsx(Icon, {
                    icon: faCaretUp
                  })
                })]
              })
            }));
          })
        }));
      })
    }), /*#__PURE__*/jsx("tbody", _objectSpread(_objectSpread({}, getTableBodyProps()), {}, {
      children: rows.length ? rows.map(function (row) {
        // prepareRow lazily initializes a row before knowing if it's rendered
        prepareRow(row);
        return /*#__PURE__*/jsx("tr", _objectSpread(_objectSpread({}, row.getRowProps()), {}, {
          className: "border-b border-gray-1 hover:bg-gray-1",
          children: row.cells.map(function (cell) {
            return /*#__PURE__*/jsx("td", _objectSpread(_objectSpread({}, cell.getCellProps()), {}, {
              className: "py-4 px-2",
              children: cell.render('Cell')
            }));
          })
        }));
      }) : /*#__PURE__*/jsx("tr", {
        className: "text-center border-b border-gray-1",
        children: /*#__PURE__*/jsx("td", {
          className: "py-4 px-2",
          colSpan: columnsLength,
          children: noDataMessage
        })
      })
    }))]
  }));
};
Table.defaultProps = {
  className: ''
};
Table.propTypes = {
  className: PropTypes.string,
  columnsLength: PropTypes.number.isRequired,
  getTableBodyProps: PropTypes.func.isRequired,
  getTableProps: PropTypes.func.isRequired,
  headerGroups: PropTypes.arrayOf(PropTypes.object).isRequired,
  noDataMessage: PropTypes.string.isRequired,
  prepareRow: PropTypes.func.isRequired,
  rows: PropTypes.arrayOf(PropTypes.object).isRequired
};
var Table$1 = Table;

export { Table$1 as default };
//# sourceMappingURL=Table.js.map