tw-table/dist/tw-table.cjs.development.js

table designed with tailwind and tanstack-table.

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = require('react');
var React__default = _interopDefault(React);
var clsx = _interopDefault(require('clsx'));
var reactTable = require('@tanstack/react-table');

function styleInject(css, ref) {
  if ( ref === void 0 ) ref = {};
  var insertAt = ref.insertAt;

  if (!css || typeof document === 'undefined') { return; }

  var head = document.head || document.getElementsByTagName('head')[0];
  var style = document.createElement('style');
  style.type = 'text/css';

  if (insertAt === 'top') {
    if (head.firstChild) {
      head.insertBefore(style, head.firstChild);
    } else {
      head.appendChild(style);
    }
  } else {
    head.appendChild(style);
  }

  if (style.styleSheet) {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }
}

var css_248z = "*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.15 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:\"\"}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.bottom-2{bottom:.5rem}.left-0{left:0}.left-2{left:.5rem}.right-0{right:0}.z-\\[9999\\]{z-index:9999}.col-span-4{grid-column:span 4/span 4}.col-span-8{grid-column:span 8/span 8}.mx-auto{margin-left:auto;margin-right:auto}.my-2{margin-bottom:.5rem;margin-top:.5rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mr-2{margin-right:.5rem}.mt-1{margin-top:.25rem}.mt-2\\.5{margin-top:.625rem}.block{display:block}.flex{display:flex}.\\!table{display:table!important}.table{display:table}.grid{display:grid}.hidden{display:none}.h-14{height:3.5rem}.h-2\\.5{height:.625rem}.h-3{height:.75rem}.h-32{height:8rem}.h-\\[40px\\]{height:40px}.h-full{height:100%}.h-px{height:1px}.min-h-screen{min-height:100vh}.w-3{width:.75rem}.w-5\\/6{width:83.333333%}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.w-px{width:1px}.min-w-48{min-width:12rem}.min-w-full{min-width:100%}.max-w-48{max-width:12rem}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-4{gap:1rem}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.5rem*var(--tw-space-x-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.5rem*var(--tw-space-y-reverse));margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-bottom-width:calc(1px*var(--tw-divide-y-reverse));border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)))}.divide-gray-200>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(229 231 235/var(--tw-divide-opacity,1))}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.truncate{overflow:hidden;text-overflow:ellipsis}.truncate,.whitespace-nowrap{white-space:nowrap}.text-wrap{text-wrap:wrap}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-md{border-radius:.375rem}.border{border-width:1px}.border-2{border-width:2px}.border-y{border-top-width:1px}.border-b,.border-y{border-bottom-width:1px}.border-none{border-style:none}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1))}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1))}.border-slate-200{--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity,1))}.border-transparent{border-color:transparent}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity,1))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity,1))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.p-0{padding:0}.p-1{padding:.25rem}.p-2{padding:.5rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-3\\.5{padding-left:.875rem;padding-right:.875rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.pl-8{padding-left:2rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-sm{font-size:.875rem;line-height:1.25rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.placeholder-gray-400::-moz-placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity,1))}.placeholder-gray-400::placeholder{--tw-placeholder-opacity:1;color:rgb(156 163 175/var(--tw-placeholder-opacity,1))}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.shadow-md,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.outline-none{outline:2px solid transparent;outline-offset:2px}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.before\\:float-left:before{content:var(--tw-content);float:left}.before\\:font-bold:before{content:var(--tw-content);font-weight:700}.before\\:content-\\[attr\\(data-label\\)\\]:before{--tw-content:attr(data-label);content:var(--tw-content)}.hover\\:bg-blue-700:hover{--tw-bg-opacity:1;background-color:rgb(29 78 216/var(--tw-bg-opacity,1))}.hover\\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.hover\\:bg-red-700:hover{--tw-bg-opacity:1;background-color:rgb(185 28 28/var(--tw-bg-opacity,1))}.focus\\:border-sky-500:focus{--tw-border-opacity:1;border-color:rgb(14 165 233/var(--tw-border-opacity,1))}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\\:ring-sky-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(14 165 233/var(--tw-ring-opacity,1))}.disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\\:bg-gray-200:disabled{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity,1))}@media (min-width:640px){.sm\\:static{position:static}.sm\\:mb-0{margin-bottom:0}.sm\\:mr-2{margin-right:.5rem}.sm\\:mt-0{margin-top:0}.sm\\:table-cell{display:table-cell}.sm\\:table-row{display:table-row}.sm\\:hidden{display:none}.sm\\:rounded-lg{border-radius:.5rem}.sm\\:border-none{border-style:none}.sm\\:pl-3\\.5{padding-left:.875rem}.sm\\:text-left{text-align:left}.sm\\:text-sm{font-size:.875rem;line-height:1.25rem}.sm\\:before\\:float-none:before{content:var(--tw-content);float:none}.sm\\:before\\:font-normal:before{content:var(--tw-content);font-weight:400}.sm\\:before\\:content-\\[\\'\\'\\]:before{--tw-content:\"\";content:var(--tw-content)}}.dark\\:divide-gray-600:where(.dark,.dark *)>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(75 85 99/var(--tw-divide-opacity,1))}.dark\\:border-gray-600:where(.dark,.dark *){--tw-border-opacity:1;border-color:rgb(75 85 99/var(--tw-border-opacity,1))}.dark\\:bg-gray-600:where(.dark,.dark *){--tw-bg-opacity:1;background-color:rgb(75 85 99/var(--tw-bg-opacity,1))}.dark\\:bg-gray-700:where(.dark,.dark *){--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.dark\\:bg-gray-800:where(.dark,.dark *){--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity,1))}.dark\\:bg-gray-900:where(.dark,.dark *){--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity,1))}.dark\\:text-gray-300:where(.dark,.dark *){--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.dark\\:hover\\:bg-gray-700:hover:where(.dark,.dark *){--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.dark\\:hover\\:bg-gray-900:hover:where(.dark,.dark *){--tw-bg-opacity:1;background-color:rgb(17 24 39/var(--tw-bg-opacity,1))}.dark\\:disabled\\:bg-gray-500:disabled:where(.dark,.dark *){--tw-bg-opacity:1;background-color:rgb(107 114 128/var(--tw-bg-opacity,1))}";
styleInject(css_248z,{"insertAt":"top"});

var CARD_TABLE_HEAD_CLASSNAMES = 'border-none h-px m-negative-1 overflow-hidden p-0 absolute w-px';
var CARD_TABLE_ROW_CLASSNAMES = 'border block mt-2.5';
var CARD_TABLE_DESCRIPTiON_CLASSNAMES = 'border-b flex justify-between items-center text-right before:content-[attr(data-label)] before:float-left before:font-bold pl-8';
var SCROLL_TABLE_HEAD_CLASSNAMES = 'border-none';
var SCROLL_TABLE_DESCRIPTION_CLASSNAMES = 'border-b';
var CARD_CHECKBOX_CLASSNAMES = 'absolute left-2';
var SCROLL_CHECKBOX_CLASSNAMES = 'mr-2';
var TABLE_HEAD_CLASSNAMES = {
  card: CARD_TABLE_HEAD_CLASSNAMES,
  scroll: SCROLL_TABLE_HEAD_CLASSNAMES
};
var TABLE_ROW_CLASSNAMES = {
  card: CARD_TABLE_ROW_CLASSNAMES,
  scroll: ''
};
var TABLE_DESCRIPTION_CLASSNAMES = {
  card: CARD_TABLE_DESCRIPTiON_CLASSNAMES,
  scroll: SCROLL_TABLE_DESCRIPTION_CLASSNAMES
};
var TABLE_ROW_CHECKBOX_CLASSNAMES = {
  card: CARD_CHECKBOX_CLASSNAMES,
  scroll: SCROLL_CHECKBOX_CLASSNAMES
};
var RESPONSIVE_TABLE_HEAD_CLASSNAMES = {
  card: CARD_TABLE_HEAD_CLASSNAMES + ' sm:static',
  scroll: ''
};
var RESPONSIVE_TABLE_ROW_CLASSNAMES = {
  card: CARD_TABLE_ROW_CLASSNAMES + ' sm:border-none sm:table-row sm:mt-0',
  scroll: ''
};
var RESPONSIVE_TABLE_DESCRIPTION_CLASSNAMES = {
  card: CARD_TABLE_DESCRIPTiON_CLASSNAMES + " sm:table-cell sm:text-left sm:before:content-[''] sm:before:float-none sm:before:font-normal sm:pl-3.5",
  scroll: ''
};
var RESPONSIVE_TABLE_ROW_CHECKBOX_CLASSNAMES = {
  card: CARD_CHECKBOX_CLASSNAMES + ' sm:static sm:mr-2',
  scroll: ''
};

var TableRow = function TableRow(_ref) {
  var row = _ref.row,
    responsivenessType = _ref.responsivenessType,
    viewType = _ref.viewType;
  return React__default.createElement("tr", {
    className: clsx('border-gray-200 dark:border-gray-600', row.getCanSelect() && row.getIsSelected() && 'bg-gray-100 dark:bg-gray-600', responsivenessType && !viewType && RESPONSIVE_TABLE_ROW_CLASSNAMES[responsivenessType], viewType && TABLE_ROW_CLASSNAMES[viewType])
  }, row.getVisibleCells().map(function (cell, idx) {
    return React__default.createElement("td", {
      key: cell.id,
      "data-label": cell.column.columnDef.header,
      className: clsx('px-3.5 py-2 min-w-48 text-wrap border-gray-300 dark:border-gray-600', responsivenessType && !viewType && RESPONSIVE_TABLE_DESCRIPTION_CLASSNAMES[responsivenessType], viewType && TABLE_DESCRIPTION_CLASSNAMES[viewType])
    }, idx === 0 && row.getCanSelect() && React__default.createElement("input", {
      type: "checkbox",
      className: clsx(responsivenessType && !viewType && RESPONSIVE_TABLE_ROW_CHECKBOX_CLASSNAMES[responsivenessType], viewType && TABLE_ROW_CHECKBOX_CLASSNAMES[viewType]),
      checked: row.getIsSelected(),
      onChange: row.getToggleSelectedHandler()
    }), reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()));
  }));
};

function _extends() {
  return _extends = Object.assign ? Object.assign.bind() : function (n) {
    for (var e = 1; e < arguments.length; e++) {
      var t = arguments[e];
      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
    }
    return n;
  }, _extends.apply(null, arguments);
}
function _objectWithoutPropertiesLoose(r, e) {
  if (null == r) return {};
  var t = {};
  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
    if (e.includes(n)) continue;
    t[n] = r[n];
  }
  return t;
}

var _excluded = ["id", "type", "placeholder", "defaultValue", "required", "onChange", "isLoading", "onKeyDown", "autoFocus"];
var Input = /*#__PURE__*/React.forwardRef(function (_ref, refProp) {
  var id = _ref.id,
    type = _ref.type,
    placeholder = _ref.placeholder,
    _ref$defaultValue = _ref.defaultValue,
    defaultValue = _ref$defaultValue === void 0 ? '' : _ref$defaultValue,
    _ref$required = _ref.required,
    required = _ref$required === void 0 ? false : _ref$required,
    _onChange = _ref.onChange,
    _ref$isLoading = _ref.isLoading,
    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
    _onKeyDown = _ref.onKeyDown,
    _ref$autoFocus = _ref.autoFocus,
    autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
  var localRef = React.useRef(null);
  var ref = refProp || localRef;
  var _useState = React.useState(defaultValue),
    inputValue = _useState[0],
    setInputValue = _useState[1];
  React.useEffect(function () {
    setInputValue(defaultValue);
  }, [defaultValue]);
  if (isLoading) {
    return React__default.createElement("input", {
      className: "block w-full px-3 py-2 border-2 border-gray-300 rounded-md skeleton",
      disabled: true
    });
  }
  return React__default.createElement("input", Object.assign({
    id: id,
    name: id,
    type: type,
    placeholder: placeholder,
    autoComplete: id,
    value: inputValue,
    required: required,
    onChange: function onChange(e) {
      setInputValue(e.target.value);
      _onChange && _onChange(e);
    },
    onKeyDown: function onKeyDown(e) {
      _onKeyDown && _onKeyDown(e);
    },
    ref: ref,
    autoFocus: autoFocus
  }, rest, {
    className: "bg-gray-100 dark:bg-gray-700 block w-full px-3 py-2 placeholder-gray-400 rounded-md shadow-sm focus:outline-none focus:ring-sky-500 focus:border-sky-500 sm:text-sm"
  }));
});

function TableFilter(_ref) {
  var _column$columnDef$met, _columnFilterValue$to;
  var column = _ref.column;
  var columnFilterValue = column.getFilterValue();
  var _ref2 = (_column$columnDef$met = column.columnDef.meta) != null ? _column$columnDef$met : {},
    filterVariant = _ref2.filterVariant;
  console.log('columnFilterValue', columnFilterValue);
  return filterVariant === 'range' ? React__default.createElement("div", null, React__default.createElement("p", null, "not implemented")) : filterVariant === 'select' ? React__default.createElement("select", {
    onChange: function onChange(e) {
      return column.setFilterValue(e.target.value);
    },
    value: columnFilterValue == null ? void 0 : columnFilterValue.toString()
  }, React__default.createElement("option", {
    value: ""
  }, "not implemented")) : React__default.createElement(Input, {
    onChange: function onChange(e) {
      column.setFilterValue(e.target.value);
    },
    placeholder: column.columnDef.header + "...",
    type: "text",
    value: (_columnFilterValue$to = columnFilterValue == null ? void 0 : columnFilterValue.toString()) != null ? _columnFilterValue$to : '',
    autoFocus: true
  });
}

var ChevronLeft = function ChevronLeft(_ref) {
  var className = _ref.className;
  return React__default.createElement("svg", {
    xmlns: "http://www.w3.org/2000/svg",
    fill: "none",
    viewBox: "0 0 24 24",
    strokeWidth: 1.5,
    stroke: "currentColor",
    className: className
  }, React__default.createElement("path", {
    strokeLinecap: "round",
    strokeLinejoin: "round",
    d: "M15.75 19.5 8.25 12l7.5-7.5"
  }));
};

var ChevronRight = function ChevronRight(_ref) {
  var className = _ref.className;
  return React__default.createElement("svg", {
    xmlns: "http://www.w3.org/2000/svg",
    fill: "none",
    viewBox: "0 0 24 24",
    strokeWidth: 1.5,
    stroke: "currentColor",
    className: className
  }, React__default.createElement("path", {
    strokeLinecap: "round",
    strokeLinejoin: "round",
    d: "m8.25 4.5 7.5 7.5-7.5 7.5"
  }));
};

var ChevronUp = function ChevronUp(_ref) {
  var className = _ref.className;
  return React__default.createElement("svg", {
    xmlns: "http://www.w3.org/2000/svg",
    fill: "none",
    viewBox: "0 0 24 24",
    strokeWidth: 1.5,
    stroke: "currentColor",
    className: className
  }, React__default.createElement("path", {
    strokeLinecap: "round",
    strokeLinejoin: "round",
    d: "m4.5 15.75 7.5-7.5 7.5 7.5"
  }));
};

var ChevronDown = function ChevronDown(_ref) {
  var className = _ref.className;
  return React__default.createElement("svg", {
    xmlns: "http://www.w3.org/2000/svg",
    fill: "none",
    viewBox: "0 0 24 24",
    strokeWidth: 1.5,
    stroke: "currentColor",
    className: className
  }, React__default.createElement("path", {
    strokeLinecap: "round",
    strokeLinejoin: "round",
    d: "m19.5 8.25-7.5 7.5-7.5-7.5"
  }));
};

var MagnifyingGlass = function MagnifyingGlass(_ref) {
  var className = _ref.className;
  return React__default.createElement("svg", {
    xmlns: "http://www.w3.org/2000/svg",
    fill: "none",
    viewBox: "0 0 24 24",
    strokeWidth: 1.5,
    stroke: "currentColor",
    className: className
  }, React__default.createElement("path", {
    strokeLinecap: "round",
    strokeLinejoin: "round",
    d: "m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
  }));
};

var Dash = function Dash(_ref) {
  var className = _ref.className;
  return React__default.createElement("svg", {
    className: className,
    xmlns: "http://www.w3.org/2000/svg",
    viewBox: "0 0 448 512",
    fill: "currentColor",
    strokeWidth: 1.5,
    stroke: "currentColor"
  }, React__default.createElement("path", {
    d: "M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"
  }));
};

var _excluded$1 = ["name"];
var Icon = function Icon(props) {
  var name = props.name,
    svgProps = _objectWithoutPropertiesLoose(props, _excluded$1);
  var icons = {
    'chevron-left': React__default.createElement(ChevronLeft, Object.assign({}, svgProps)),
    'chevron-right': React__default.createElement(ChevronRight, Object.assign({}, svgProps)),
    'chevron-up': React__default.createElement(ChevronUp, Object.assign({}, svgProps)),
    'chevron-down': React__default.createElement(ChevronDown, Object.assign({}, svgProps)),
    'magnifying-glass': React__default.createElement(MagnifyingGlass, Object.assign({}, svgProps)),
    'dash': React__default.createElement(Dash, Object.assign({}, svgProps))
  };
  return icons[name];
};

var TableHead = function TableHead(_ref) {
  var headerGroup = _ref.headerGroup,
    enableMultiRowSelection = _ref.enableMultiRowSelection,
    isAllRowsSelected = _ref.isAllRowsSelected,
    toggleAllRowsSelectedHandler = _ref.toggleAllRowsSelectedHandler;
  var _useState = React.useState(null),
    targetSearchCol = _useState[0],
    setTargetSearchCol = _useState[1];
  return React__default.createElement(React__default.Fragment, null, React__default.createElement("tr", {
    key: headerGroup.id,
    className: clsx('w-full')
  }, headerGroup.headers.map(function (header, idx) {
    var _header$column$column;
    return React__default.createElement("th", {
      key: header.id,
      className: "px-3.5 py-2 text-left min-w-48 max-w-48 h-14 dark:bg-gray-800 dark:text-gray-300",
      onBlur: function onBlur() {
        if (header.column.getFilterValue()) return;
        setTargetSearchCol(null);
      },
      scope: "col",
      title: (_header$column$column = header.column.columnDef.header) == null ? void 0 : _header$column$column.toString()
    }, targetSearchCol !== header.id && React__default.createElement("div", {
      className: "flex justify-between items-center"
    }, idx === 0 && enableMultiRowSelection && toggleAllRowsSelectedHandler && React__default.createElement("div", {
      className: "flex items-center mr-2"
    }, React__default.createElement("input", {
      type: "checkbox",
      className: "mr-2",
      checked: isAllRowsSelected || false,
      onChange: toggleAllRowsSelectedHandler
    })), React__default.createElement("div", {
      className: "truncate mr-2"
    }, reactTable.flexRender(header.column.columnDef.header, header.getContext())), React__default.createElement("div", {
      className: "flex space-x-2"
    }, header.column.getCanFilter() && React__default.createElement("button", {
      className: "p-2 rounded-full shadow-md hover:bg-gray-100 dark:hover:bg-gray-900",
      onClick: function onClick() {
        return header.column.getCanFilter() && setTargetSearchCol(header.id);
      }
    }, React__default.createElement(Icon, {
      name: "magnifying-glass",
      className: "h-3 w-3"
    })), header.column.getCanSort() && React__default.createElement("div", {
      className: "flex flex-col"
    }, React__default.createElement("button", {
      className: "p-2 rounded-full shadow-md hover:bg-gray-100 dark:hover:bg-gray-900",
      onClick: function onClick() {
        return header.column.toggleSorting();
      }
    }, header.column.getIsSorted() === false ? React__default.createElement(Icon, {
      name: "dash",
      className: "h-3 w-3"
    }) : header.column.getIsSorted() === 'desc' ? React__default.createElement(Icon, {
      name: "chevron-down",
      className: "h-3 w-3"
    }) : React__default.createElement(Icon, {
      name: "chevron-up",
      className: "h-3 w-3"
    }))))), targetSearchCol === header.id && header.column.getCanFilter() && React__default.createElement(TableFilter, {
      column: header.column
    }));
  })));
};

var className = "px-3 py-1 border border-transparent rounded-full bg-gray-50 dark:bg-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700 disabled:bg-gray-200 dark:disabled:bg-gray-500 disabled:cursor-not-allowed";
var PageControls = function PageControls(_ref) {
  var table = _ref.table;
  return React__default.createElement(React__default.Fragment, null, React__default.createElement("button", {
    className: "flex " + className,
    onClick: function onClick() {
      return table.firstPage();
    },
    disabled: !table.getCanPreviousPage()
  }, React__default.createElement(Icon, {
    name: "chevron-left",
    className: "h-3 w-3"
  }), React__default.createElement(Icon, {
    name: "chevron-left",
    className: "h-3 w-3"
  })), React__default.createElement("button", {
    className: "" + className,
    onClick: function onClick() {
      return table.previousPage();
    },
    disabled: !table.getCanPreviousPage()
  }, React__default.createElement(Icon, {
    name: "chevron-left",
    className: "h-3 w-3"
  })), React__default.createElement("button", {
    className: "" + className,
    onClick: function onClick() {
      return table.nextPage();
    },
    disabled: !table.getCanNextPage()
  }, React__default.createElement(Icon, {
    name: "chevron-right",
    className: "h-3 w-3"
  })), React__default.createElement("button", {
    className: "flex " + className,
    onClick: function onClick() {
      return table.lastPage();
    },
    disabled: !table.getCanNextPage()
  }, React__default.createElement(Icon, {
    name: "chevron-right",
    className: "h-3 w-3"
  }), React__default.createElement(Icon, {
    name: "chevron-right",
    className: "h-3 w-3"
  })));
};

var uiTexts = {
  empty: "Empty",
  sort: {
    by: "Sort by",
    dir: "Sort direction",
    desc: "Desc",
    asc: "Asc"
  },
  search: {
    label: "Search",
    placeholder: "Search..."
  },
  pagination: {
    previous: "Previous",
    next: "Next",
    page: "Page",
    of: "of",
    show: "Show",
    showing: "Showing",
    rows: "rows"
  }
};

var LabelsContext = /*#__PURE__*/React.createContext({
  texts: uiTexts
});
var useLabels = function useLabels() {
  return React.useContext(LabelsContext);
};
var LabelsProvider = function LabelsProvider(_ref) {
  var children = _ref.children,
    texts = _ref.texts;
  return React__default.createElement(LabelsContext.Provider, {
    value: {
      texts: texts
    }
  }, children);
};

var PageSizeControls = function PageSizeControls(_ref) {
  var table = _ref.table;
  var _useLabels = useLabels(),
    texts = _useLabels.texts;
  return React__default.createElement("div", {
    className: "space-x-2"
  }, React__default.createElement("span", null, texts.pagination.show), React__default.createElement("select", {
    value: table.getState().pagination.pageSize,
    onChange: function onChange(e) {
      table.setPageSize(Number(e.target.value));
    },
    className: "bg-white dark:bg-gray-700 rounded px-2 py-1 text-sm outline-none"
  }, [10, 20, 30, 40, 50].map(function (pageSize) {
    return React__default.createElement("option", {
      key: pageSize,
      value: pageSize
    }, pageSize);
  })));
};

var Info = function Info(_ref) {
  var table = _ref.table;
  var _useLabels = useLabels(),
    texts = _useLabels.texts;
  return React__default.createElement("div", {
    className: "flex justify-between"
  }, React__default.createElement("div", {
    className: "text-sm"
  }, texts.pagination.showing, " ", table.getRowModel().rows.length.toLocaleString(), " ", texts.pagination.of, ' ', table.getRowCount().toLocaleString(), " ", texts.pagination.rows), React__default.createElement("div", null, React__default.createElement("span", {
    className: "flex items-center gap-1 text-sm"
  }, React__default.createElement("div", null, texts.pagination.page), React__default.createElement("strong", null, table.getState().pagination.pageIndex + 1, " ", texts.pagination.of, ' ', table.getPageCount().toLocaleString()))));
};

var Pagination = function Pagination(_ref) {
  var table = _ref.table;
  return React__default.createElement("div", {
    className: "py-2"
  }, React__default.createElement("div", {
    className: "flex items-center justify-between gap-4 mb-4"
  }, React__default.createElement("div", {
    className: "flex items-center gap-2"
  }, React__default.createElement(PageControls, {
    table: table
  })), React__default.createElement(PageSizeControls, {
    table: table
  })), React__default.createElement(Info, {
    table: table
  }));
};

var _excluded$2 = ["label", "id", "options"];
var Select = function Select(_ref) {
  var label = _ref.label,
    id = _ref.id,
    options = _ref.options,
    rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
  return React__default.createElement("div", null, label && React__default.createElement("label", {
    htmlFor: id,
    className: "block text-sm font-medium truncate"
  }, label), React__default.createElement("select", Object.assign({
    id: id,
    name: id,
    autoComplete: id,
    className: "bg-gray-100 dark:bg-gray-700 w-full focus:ring-sky-500 focus:border-sky-500 h-full px-2 py-2 sm:text-sm rounded-md outline-none appearance-none"
  }, rest), options.map(function (option) {
    return React__default.createElement("option", {
      key: option.value,
      value: option.value
    }, option.label);
  })));
};

var _excluded$3 = ["id", "label", "options", "placeholder", "onChange"];
function InputWithSelect(_ref) {
  var id = _ref.id,
    label = _ref.label,
    options = _ref.options,
    placeholder = _ref.placeholder,
    onChange = _ref.onChange,
    rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
  var _useState = React.useState(null),
    selectedId = _useState[0],
    setSelectedId = _useState[1];
  var _useState2 = React.useState(''),
    inputValue = _useState2[0],
    setInputValue = _useState2[1];
  var isOptionsEmpty = options.length === 0;
  React.useEffect(function () {
    if (!selectedId) return;
    onChange(selectedId, inputValue);
  }, [inputValue, selectedId, setSelectedId]);
  React.useEffect(function () {
    if (isOptionsEmpty || selectedId) return;
    setSelectedId(options[0].value);
  }, [options]);
  return React__default.createElement("div", null, React__default.createElement("label", {
    htmlFor: id,
    className: "block text-sm font-medium"
  }, label), React__default.createElement("div", {
    className: "mt-1 relative rounded-md shadow-sm grid grid-cols-12 gap-2"
  }, React__default.createElement("div", {
    className: "col-span-4"
  }, React__default.createElement(Select, {
    id: id,
    options: options,
    onChange: function onChange(e) {
      setSelectedId(e.target.value);
    }
  })), React__default.createElement("div", {
    className: "col-span-8"
  }, React__default.createElement(Input, Object.assign({
    type: "text",
    name: id,
    id: id,
    placeholder: placeholder,
    onChange: function onChange(e) {
      return setInputValue(e.target.value);
    }
  }, rest)))));
}

function isObject(item) {
  return item !== null && typeof item === 'object';
}
function deepMerge(target, source) {
  var result = _extends({}, target);
  for (var key in source) {
    if (isObject(source[key]) && isObject(target[key])) {
      // Recursively merge if both target and source have the same key and it's an object
      result[key] = deepMerge(target[key], source[key]);
    } else {
      // Otherwise, directly copy the source property
      result[key] = source[key];
    }
  }
  return result;
}

function isNumeric(val) {
  return !isNaN(parseFloat(val)) && isFinite(parseFloat(val));
}

/**
 * Renders a mobile version of the table filter.
 *
 * @param props - The component props.
 * @returns The rendered mobile table filter.
 */
var TableToolbarMobile = function TableToolbarMobile(_ref) {
  var table = _ref.table,
    _ref$forceHidden = _ref.forceHidden,
    forceHidden = _ref$forceHidden === void 0 ? false : _ref$forceHidden,
    _ref$forceShow = _ref.forceShow,
    forceShow = _ref$forceShow === void 0 ? false : _ref$forceShow;
  var _useLabels = useLabels(),
    texts = _useLabels.texts;
  var headerGroups = table.getHeaderGroups().map(function (headerGroup) {
    return headerGroup;
  });
  var headers = headerGroups.flatMap(function (headerGroup) {
    return headerGroup.headers;
  });
  var searchableColumns = headers.filter(function (header) {
    return header.column.getCanFilter();
  });
  var sortableColumns = headers.filter(function (header) {
    return header.column.getCanSort();
  });
  var responsivenessClassname = forceShow ? 'block' : forceHidden ? 'hidden' : 'sm:hidden';
  return React__default.createElement("div", {
    className: "w-full block " + responsivenessClassname + " space-y-2 my-2"
  }, React__default.createElement("div", {
    className: "w-full"
  }, React__default.createElement(InputWithSelect, {
    id: 'search',
    label: texts.search.label,
    placeholder: texts.search.placeholder,
    options: searchableColumns.map(function (header) {
      return {
        value: header.id,
        label: header.column.columnDef.header
      };
    }),
    onChange: function onChange(selectedId, inputValue) {
      var header = searchableColumns.find(function (header) {
        return header.id === selectedId;
      });
      if (header) {
        // since we don't support multi-column filtering yet, we clear the previous filters.
        table.setColumnFilters([]);
        var _inputValue = isNumeric(inputValue) ? Number(inputValue) : inputValue;
        header.column.setFilterValue(_inputValue);
      }
    }
  })), React__default.createElement("div", {
    className: "w-full grid grid-cols-12 gap-2"
  }, React__default.createElement("div", {
    className: "col-span-4"
  }, React__default.createElement(Select, {
    id: "sort_direction",
    label: texts.sort.dir,
    options: [{
      value: 'asc',
      label: texts.sort.asc
    }, {
      value: 'desc',
      label: texts.sort.desc
    }],
    onChange: function onChange(e) {
      table.setSorting(function (old) {
        var newSorting = old.map(function (sort) {
          return {
            id: sort.id ? sort.id : sortableColumns[0].id,
            desc: e.target.value === 'desc'
          };
        });
        return newSorting;
      });
    }
  })), React__default.createElement("div", {
    className: "col-span-8"
  }, React__default.createElement(Select, {
    id: "sort",
    label: texts.sort.by,
    options: [{
      value: 'None',
      label: 'None'
    }].concat(sortableColumns.map(function (header) {
      return {
        value: header.id,
        label: header.column.columnDef.header
      };
    })),
    onChange: function onChange(e) {
      table.setSorting(function (updater) {
        return [{
          id: e.target.value,
          desc: updater.length ? updater[0].desc : false
        }];
      });
    }
  }))));
};

var TableRowSkeleton = function TableRowSkeleton(props) {
  return React__default.createElement("tr", {
    className: "flex flex-col w-full mb-5 flex-no wrap sm:table-row sm:mb-0"
  }, Array.from(Array(props.colsLength).keys()).map(function (_, idx) {
    return React__default.createElement("td", {
      key: idx,
      className: "h-[40px] px-1 py-2 whitespace-nowrap text-sm text-gray-900 border-y border-slate-200 text-center"
    }, React__default.createElement("p", {
      className: 'h-2.5 bg-gray-200 rounded-full w-5/6 animate-pulse'
    }));
  }));
};

function numericFilterFn(row, columnId, filterValue) {
  var rowValue = row.getValue(columnId);
  if (filterValue == null || filterValue === '') return true; // No filter applied
  return String(rowValue).includes(filterValue); // Number(rowValue) === Number(filterValue); // Adjust logic as needed
}

var TwTable = function TwTable(_ref) {
  var columns = _ref.columns,
    data = _ref.data,
    _ref$responsivenessTy = _ref.responsivenessType,
    responsivenessType = _ref$responsivenessTy === void 0 ? 'card' : _ref$responsivenessTy,
    _ref$serverSide = _ref.serverSide,
    serverSide = _ref$serverSide === void 0 ? false : _ref$serverSide,
    pagination = _ref.pagination,
    setPagination = _ref.setPagination,
    _ref$rowCount = _ref.rowCount,
    rowCount = _ref$rowCount === void 0 ? 0 : _ref$rowCount,
    columnFilters = _ref.columnFilters,
    setColumnFilters = _ref.setColumnFilters,
    rowSelection = _ref.rowSelection,
    setRowSelection = _ref.setRowSelection,
    enableMultiRowSelection = _ref.enableMultiRowSelection,
    sorting = _ref.sorting,
    setSorting = _ref.setSorting,
    _ref$texts = _ref.texts,
    texts = _ref$texts === void 0 ? uiTexts : _ref$texts,
    _ref$isLoading = _ref.isLoading,
    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
    viewType = _ref.viewType,
    columnVisibility = _ref.columnVisibility;
  // states prefixed with undescore are used for client-side features.
  var _React$useState = React__default.useState([]),
    _columnFilters = _React$useState[0],
    _setColumnFilters = _React$useState[1];
  var _React$useState2 = React__default.useState([]),
    _sorting = _React$useState2[0],
    _setSorting = _React$useState2[1];
  var _React$useState3 = React__default.useState({
      pageIndex: 0,
      pageSize: 10
    }),
    _pagination = _React$useState3[0],
    _setPagination = _React$useState3[1];
  var _texts = deepMerge(uiTexts, texts);
  var table = reactTable.useReactTable({
    columns: columns,
    data: data,
    filterFns: {},
    onColumnFiltersChange: !serverSide ? _setColumnFilters : setColumnFilters || _setColumnFilters,
    getCoreRowModel: reactTable.getCoreRowModel(),
    getFilteredRowModel: !serverSide ? reactTable.getFilteredRowModel() : undefined,
    getSortedRowModel: !serverSide ? reactTable.getSortedRowModel() : undefined,
    getPaginationRowModel: !serverSide ? reactTable.getPaginationRowModel() : undefined,
    onSortingChange: !serverSide ? _setSorting : setSorting || _setSorting,
    onPaginationChange: !serverSide ? _setPagination : setPagination || _setPagination,
    onRowSelectionChange: setRowSelection,
    state: {
      sorting: !serverSide ? _sorting : sorting || _sorting,
      pagination: !serverSide ? _pagination : pagination || _pagination,
      columnFilters: !serverSide ? _columnFilters : columnFilters || _columnFilters,
      rowSelection: rowSelection,
      columnVisibility: columnVisibility
    },
    rowCount: !serverSide ? undefined : rowCount,
    enableSortingRemoval: false,
    manualPagination: serverSide,
    enableRowSelection: rowSelection ? true : false,
    enableMultiRowSelection: enableMultiRowSelection,
    defaultColumn: {
      filterFn: function filterFn(row, columnId, filterValue) {
        var rowValue = row.getValue(columnId);
        // Check if the value is numeric
        if (typeof rowValue === 'number') {
          return numericFilterFn(row, columnId, filterValue);
        }
        // Fallback to default behavior (string filtering)
        return String(rowValue).toLowerCase().includes(String(filterValue).toLowerCase());
      }
    }
  });
  return React__default.createElement(LabelsProvider, {
    texts: _texts
  }, React__default.createElement("div", {
    className: "flex flex-col flex-end bg-white dark:bg-gray-900 text-black dark:text-gray-300"
  }, React__default.createElement("div", {
    className: "overflow-x-auto"
  }, React__default.createElement("div", {
    className: "shadow overflow-x-auto sm:rounded-lg"
  }, React__default.createElement(TableToolbarMobile, {
    table: table,
    forceHidden: viewType && viewType === 'scroll' || false,
    forceShow: viewType && viewType === 'card' || false
  }), React__default.createElement("table", {
    className: "min-w-full divide-y divide-gray-200 dark:divide-gray-600 relative"
  }, React__default.createElement("thead", {
    className: clsx('bg-gray-50 border', responsivenessType && !viewType && RESPONSIVE_TABLE_HEAD_CLASSNAMES[responsivenessType], viewType && TABLE_HEAD_CLASSNAMES[viewType])
  }, table.getHeaderGroups().map(function (headerGroup) {
    return React__default.createElement(TableHead, {
      key: headerGroup.id,
      headerGroup: headerGroup,
      enableMultiRowSelection: enableMultiRowSelection,
      isAllRowsSelected: rowSelection && table.getIsAllRowsSelected(),
      toggleAllRowsSelectedHandler: rowSelection && table.getToggleAllRowsSelectedHandler()
    });
  })), React__default.createElement("tbody", null, isLoading ? React__default.createElement(React__default.Fragment, null, Array.from(Array((pagination == null ? void 0 : pagination.pageSize) || _pagination.pageSize).keys()).map(function (_, idx) {
    return React__default.createElement(TableRowSkeleton, {
      colsLength: columns.length,
      key: idx
    });
  })) : table.getRowModel().rows.length === 0 ? React__default.createElement("tr", {
    className: "text-center h-32"
  }, React__default.createElement("td", {
    colSpan: 12
  }, _texts.empty)) : table.getRowModel().rows.map(function (row) {
    return React__default.createElement(TableRow, {
      key: row.id,
      row: row,
      viewType: viewType,
      responsivenessType: responsivenessType
    });
  }))))), React__default.createElement(Pagination, {
    table: table
  })));
};

exports.TwTable = TwTable;
//# sourceMappingURL=tw-table.cjs.development.js.map