@omakase-ui/react-table/dist/react-table.esm.js

Omakase React Table Component.

import React, { useMemo } from 'react';
import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';

var DefaultCell = function DefaultCell(_ref) {
  var _getValue;
  var getValue = _ref.getValue;
  return React.createElement("div", null, (_getValue = getValue()) != null ? _getValue : '----');
};
var DefaultEmpty = function DefaultEmpty() {
  return React.createElement("div", {
    className: "flex min-h-[200px] w-full items-center justify-center text-gray-500"
  }, "Empty");
};
function DataTable(_ref2) {
  var data = _ref2.data,
    columns = _ref2.columns,
    sort = _ref2.sort,
    onSortChange = _ref2.onSortChange,
    bodyClassName = _ref2.bodyClassName,
    _ref2$Empty = _ref2.Empty,
    Empty = _ref2$Empty === void 0 ? DefaultEmpty : _ref2$Empty;
  var defaultColumn = useMemo(function () {
    return {
      minSize: 30,
      size: 150,
      Cell: DefaultCell
    };
  }, []);
  var table = useReactTable({
    data: data,
    columns: columns,
    defaultColumn: defaultColumn,
    enableColumnResizing: true,
    columnResizeMode: 'onChange',
    getCoreRowModel: getCoreRowModel()
  });
  var handleSortChange = function handleSortChange(columnId) {
    if (!onSortChange) {
      return;
    }
    if ((sort == null ? void 0 : sort[0]) === columnId) {
      if ((sort == null ? void 0 : sort[1]) === 'asc') {
        onSortChange([columnId, 'desc']);
      } else {
        onSortChange([columnId, 'asc']);
      }
    } else {
      onSortChange([columnId, 'asc']);
    }
  };
  var rows = table.getRowModel().rows;
  return React.createElement("div", {
    className: "max-w-full overflow-x-auto p-2"
  }, React.createElement("div", Object.assign({}, {
    className: 'w-full rounded border align-middle ',
    // FIXME: some issue, https://tanstack.com/table/v8/docs/examples/react/full-width-resizable-table
    style: {
      width: table.getTotalSize()
    }
  }), React.createElement("div", {
    className: "border-b border-gray-200 "
  }, table.getHeaderGroups().map(function (headerGroup) {
    return React.createElement("div", Object.assign({}, {
      key: headerGroup.id,
      className: 'flex divide-x divide-gray-200'
    }), headerGroup.headers.map(function (header) {
      return React.createElement("div", Object.assign({}, {
        key: header.id,
        className: ' relative h-full w-full items-center px-6 py-3 text-left text-sm font-medium capitalize tracking-wider text-gray-500 hover:bg-gray-100',
        style: {
          width: header.getSize()
        }
      }, {
        onClick: function onClick() {
          return handleSortChange(header.id);
        },
        role: "button",
        tabIndex: 0
      }), React.createElement("div", null, header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()), header.id === (sort == null ? void 0 : sort[0]) && React.createElement("span", {
        className: "ml-2"
      }, (sort == null ? void 0 : sort[1]) === 'asc' ? '▲' : '▼')), React.createElement("div", Object.assign({}, {
        onMouseDown: header.getResizeHandler(),
        onTouchStart: header.getResizeHandler(),
        className: "absolute right-0 top-0 z-10 inline-block h-full w-1 hover:bg-red-400 cursor-col-resize " + (header.column.getIsResizing() ? 'shadow' : '')
      })));
    }));
  })), React.createElement("div", Object.assign({}, {
    className: bodyClassName
  }), rows.length === 0 ? React.createElement(Empty, null) : React.createElement(React.Fragment, null, rows.map(function (row) {
    return React.createElement("div", Object.assign({}, {
      key: row.id,
      className: 'flex group border-b last:border-b-0 hover:bg-gray-100'
    }), row.getVisibleCells().map(function (cell) {
      return React.createElement("div", Object.assign({}, {
        key: cell.id,
        className: 'px-6 py-4 whitespace-nowrap text-sm text-gray-500 truncate',
        style: {
          width: cell.column.getSize()
        }
      }), flexRender(cell.column.columnDef.cell, cell.getContext()));
    }));
  })))));
}

export { DataTable };
//# sourceMappingURL=react-table.esm.js.map