@helpdice/ui 1.3.8 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/index.js +46 -32
  2. package/dist/table/index.js +46 -32
  3. package/esm/table/table-body.js +7 -7
  4. package/esm/table/table-cell.js +1 -0
  5. package/esm/table/table-head.js +24 -20
  6. package/esm/table/table.js +14 -5
  7. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -42169,9 +42169,10 @@ var TableHead = function TableHead(props) {
42169
42169
  },
42170
42170
  "data-column": Header,
42171
42171
  key: unq_accessor
42172
- }, accessor === 'fixed' && /*#__PURE__*/React.createElement(Select, {
42173
- key: unq_accessor,
42174
- name: filterName,
42172
+ }, accessor === 'fixed' && /*#__PURE__*/React.createElement(Select
42173
+ // key={unq_accessor}
42174
+ // name={filterName}
42175
+ , {
42175
42176
  value: (_filters$filterName = filters[filterName]) !== null && _filters$filterName !== undefined ? _filters$filterName : 'All',
42176
42177
  onChange: function onChange(newValue) {
42177
42178
  return handleFilterChange(filterName, newValue);
@@ -42182,21 +42183,24 @@ var TableHead = function TableHead(props) {
42182
42183
  return /*#__PURE__*/React.createElement(Select.Option, {
42183
42184
  value: option.value
42184
42185
  }, option.name);
42185
- }) : null), accessor === 'date' && /*#__PURE__*/React.createElement(Input, {
42186
- id: "filter-date-".concat(filterName),
42187
- htmlType: "date",
42188
- name: filterName,
42186
+ }) : null), accessor === 'date' && /*#__PURE__*/React.createElement(Input
42187
+ // id={`filter-date-${filterName}`}
42188
+ , {
42189
+ htmlType: "date"
42190
+ // name={filterName}
42191
+ ,
42189
42192
  value: filters[filterName],
42190
42193
  onChange: function onChange(e) {
42191
42194
  return handleFilterChange(filterName, e.target.value);
42192
42195
  }
42193
- }), accessor === 'search' && /*#__PURE__*/React.createElement(Input, {
42194
- id: "filter-search-".concat(filterName),
42196
+ }), accessor === 'search' && /*#__PURE__*/React.createElement(Input
42197
+ // id={`filter-search-${filterName}`}
42198
+ , {
42195
42199
  htmlType: "text",
42196
42200
  autoComplete: "off"
42197
42201
  // ref={filterRefs.current[filterName]} // Dynamically set ref}
42202
+ // name={filterName}
42198
42203
  ,
42199
- name: filterName,
42200
42204
  style: {
42201
42205
  height: 30,
42202
42206
  minWidth: 160
@@ -42211,9 +42215,9 @@ var TableHead = function TableHead(props) {
42211
42215
  });
42212
42216
  };
42213
42217
  return /*#__PURE__*/React.createElement(React.Fragment, null, colgroup, /*#__PURE__*/React.createElement("thead", {
42214
- className: _JSXStyle.dynamic([["318735310", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
42218
+ className: _JSXStyle.dynamic([["500933572", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
42215
42219
  }, /*#__PURE__*/React.createElement("tr", {
42216
- className: _JSXStyle.dynamic([["318735310", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
42220
+ className: _JSXStyle.dynamic([["500933572", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
42217
42221
  }, columns.map(function (column, index) {
42218
42222
  return /*#__PURE__*/React.createElement("th", {
42219
42223
  style: {
@@ -42225,23 +42229,23 @@ var TableHead = function TableHead(props) {
42225
42229
  },
42226
42230
  key: "table-th-".concat(column.prop.toString(), "-").concat(index),
42227
42231
  "data-column": column.label,
42228
- className: _JSXStyle.dynamic([["318735310", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + (column.className || "")
42232
+ className: _JSXStyle.dynamic([["500933572", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + (column.className || "")
42229
42233
  }, /*#__PURE__*/React.createElement("div", {
42230
- className: _JSXStyle.dynamic([["318735310", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + "thead-box"
42234
+ className: _JSXStyle.dynamic([["500933572", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + "thead-box"
42231
42235
  }, column.label, /*#__PURE__*/React.createElement("br", {
42232
- className: _JSXStyle.dynamic([["318735310", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
42236
+ className: _JSXStyle.dynamic([["500933572", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
42233
42237
  }), /*#__PURE__*/React.createElement("span", {
42234
42238
  style: {
42235
42239
  textAlign: 'center'
42236
42240
  },
42237
- className: _JSXStyle.dynamic([["318735310", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
42241
+ className: _JSXStyle.dynamic([["500933572", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
42238
42242
  }, column.text)));
42239
42243
  })), showFilters && /*#__PURE__*/React.createElement("tr", {
42240
- className: _JSXStyle.dynamic([["318735310", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
42244
+ className: _JSXStyle.dynamic([["500933572", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
42241
42245
  }, generateFilterInputs())), /*#__PURE__*/React.createElement(_JSXStyle, {
42242
- id: "318735310",
42243
- dynamic: [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]
42244
- }, "thead.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;font-size:inherit;".concat(stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", ";}th.__jsx-style-dynamic-selector{padding:0 0.5em;font-size:calc(0.75 * var(--table-font-size));font-weight:normal;text-align:left;-webkit-letter-spacing:0;-moz-letter-spacing:0;-ms-letter-spacing:0;letter-spacing:0;vertical-align:middle;min-height:calc(2.5 * var(--table-font-size));color:").concat(theme.palette.accents_5, ";background:").concat(theme.palette.accents_1, ";border-bottom:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-radius:0;").concat(stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", ";}th.__jsx-style-dynamic-selector:nth-child(1){border-bottom:1px solid ").concat(theme.palette.border, ";border-left:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-left-radius:").concat(theme.layout.radius, ";border-bottom-left-radius:").concat(theme.layout.radius, ";}th.__jsx-style-dynamic-selector:last-child{border-bottom:1px solid ").concat(theme.palette.border, ";border-right:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-right-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";}.thead-box.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-align:center;min-height:calc(2.5 * var(--table-font-size));text-transform:uppercase;}")));
42246
+ id: "500933572",
42247
+ dynamic: [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]
42248
+ }, "thead.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;font-size:inherit;".concat(stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", ";}th.__jsx-style-dynamic-selector{padding:0 0.5em;font-size:calc(0.75 * var(--table-font-size));font-weight:normal;text-align:left;-webkit-letter-spacing:0;-moz-letter-spacing:0;-ms-letter-spacing:0;letter-spacing:0;vertical-align:middle;min-height:calc(2.5 * var(--table-font-size));color:").concat(theme.palette.accents_5, ";background:").concat(theme.palette.accents_1, ";border-bottom:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-radius:0;}th.__jsx-style-dynamic-selector:nth-child(1){border-bottom:1px solid ").concat(theme.palette.border, ";border-left:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-left-radius:").concat(theme.layout.radius, ";border-bottom-left-radius:").concat(theme.layout.radius, ";}th.__jsx-style-dynamic-selector:last-child{border-bottom:1px solid ").concat(theme.palette.border, ";border-right:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-right-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";}.thead-box.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-align:center;min-height:calc(2.5 * var(--table-font-size));text-transform:uppercase;}")));
42245
42249
  };
42246
42250
  TableHead.displayName = 'TableHead';
42247
42251
 
@@ -42263,6 +42267,7 @@ var TableCell = function TableCell(_ref) {
42263
42267
  paddingLeft: '0.3rem',
42264
42268
  paddingRight: '0.3rem',
42265
42269
  color: "".concat(column === null || column === undefined ? undefined : column.color),
42270
+ boxSizing: 'border-box',
42266
42271
  whiteSpace: column !== null && column !== undefined && column.noWrap ? 'nowrap' : 'normal'
42267
42272
  }, currentRowValue === null || currentRowValue === undefined ? undefined : currentRowValue.style),
42268
42273
  "data-column": String(column.label).toLowerCase(),
@@ -43282,7 +43287,7 @@ var TableBody = function TableBody(_ref) {
43282
43287
  })))));
43283
43288
  }
43284
43289
  return /*#__PURE__*/React.createElement("tbody", {
43285
- className: _JSXStyle.dynamic([["1229207510", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
43290
+ className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
43286
43291
  }, data.map(function (row, index) {
43287
43292
  var _row$table, _row$table2, _row$table3, _row$table4, _row$table5;
43288
43293
  var qid = _.uniqueId();
@@ -43290,21 +43295,21 @@ var TableBody = function TableBody(_ref) {
43290
43295
  var uid = _.uniqueId();
43291
43296
  return /*#__PURE__*/React.createElement("tr", {
43292
43297
  key: uid,
43293
- className: _JSXStyle.dynamic([["1229207510", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
43298
+ className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
43294
43299
  }, /*#__PURE__*/React.createElement("td", {
43295
43300
  colSpan: columns.length,
43296
- className: _JSXStyle.dynamic([["1229207510", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
43301
+ className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
43297
43302
  }, "\u2003"));
43298
43303
  }
43299
43304
  return /*#__PURE__*/React.createElement(React.Fragment, null, renderRow(columns, row, index), (row === null || row === undefined ? undefined : row.table) && /*#__PURE__*/React.createElement("tr", {
43300
43305
  key: qid,
43301
- className: _JSXStyle.dynamic([["1229207510", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
43306
+ className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
43302
43307
  }, /*#__PURE__*/React.createElement("td", {
43303
43308
  style: {
43304
43309
  padding: '1rem'
43305
43310
  },
43306
43311
  colSpan: columns.length,
43307
- className: _JSXStyle.dynamic([["1229207510", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
43312
+ className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
43308
43313
  }, /*#__PURE__*/React.createElement(DataTable$1, {
43309
43314
  readOnly: true,
43310
43315
  stickyHeader: false,
@@ -43332,9 +43337,9 @@ var TableBody = function TableBody(_ref) {
43332
43337
  // </tr>
43333
43338
  // )
43334
43339
  }), /*#__PURE__*/React.createElement(_JSXStyle, {
43335
- id: "1229207510",
43340
+ id: "1422656197",
43336
43341
  dynamic: [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]
43337
- }, "tbody.__jsx-style-dynamic-selector{display:block;overflow-y:auto;max-height:calc(100vh - 10rem);}tr.__jsx-style-dynamic-selector{-webkit-transition:background-color 0.25s ease;transition:background-color 0.25s ease;font-size:inherit;}tr.hover.__jsx-style-dynamic-selector:hover{background-color:".concat(theme.palette.accents_1, ";}tr.draggable.__jsx-style-dynamic-selector:hover{border:2px dashed #dfdfdf;margin:3px;}tr.__jsx-style-dynamic-selector td{padding:0 0.5em;border-bottom:1px solid ").concat(theme.palette.border, ";color:").concat(theme.palette.accents_6, ";font-size:calc(0.875 * var(--table-font-size));text-align:left;}tr.__jsx-style-dynamic-selector .cell{min-height:calc(3.125 * var(--table-font-size));display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;}")));
43342
+ }, "tr.__jsx-style-dynamic-selector{-webkit-transition:background-color 0.25s ease;transition:background-color 0.25s ease;font-size:inherit;}tr.hover.__jsx-style-dynamic-selector:hover{background-color:".concat(theme.palette.accents_1, ";}tr.draggable.__jsx-style-dynamic-selector:hover{border:2px dashed #dfdfdf;margin:3px;}tr.__jsx-style-dynamic-selector td{padding:0 0.5em;border-bottom:1px solid ").concat(theme.palette.border, ";color:").concat(theme.palette.accents_6, ";font-size:calc(0.875 * var(--table-font-size));text-align:left;}tr.__jsx-style-dynamic-selector .cell{min-height:calc(3.125 * var(--table-font-size));display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;}")));
43338
43343
  };
43339
43344
  TableBody.displayName = 'TableBody';
43340
43345
 
@@ -43470,7 +43475,7 @@ function TableComponent(tableProps) {
43470
43475
  }, /*#__PURE__*/React.createElement("table", _extends({
43471
43476
  ref: ref
43472
43477
  }, props, {
43473
- className: _JSXStyle.dynamic([["864348448", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || className || "")
43478
+ className: _JSXStyle.dynamic([["2620297225", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || className || "")
43474
43479
  }), /*#__PURE__*/React.createElement(TableHead, {
43475
43480
  stickyHeader: stickyHeader,
43476
43481
  columns: columns,
@@ -43488,8 +43493,17 @@ function TableComponent(tableProps) {
43488
43493
  readOnly: readOnly,
43489
43494
  onSelected: onSelected
43490
43495
  }), children, dataLength && viewLength && onPageChange ? /*#__PURE__*/React.createElement("tfoot", {
43491
- className: _JSXStyle.dynamic([["864348448", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
43496
+ className: _JSXStyle.dynamic([["2620297225", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
43497
+ }, /*#__PURE__*/React.createElement("td", {
43498
+ colSpan: columns === null || columns === undefined ? undefined : columns.length,
43499
+ className: _JSXStyle.dynamic([["2620297225", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
43492
43500
  }, /*#__PURE__*/React.createElement(Pagination, {
43501
+ style: {
43502
+ marginLeft: '10px',
43503
+ marginRight: '10px',
43504
+ marginTop: '10px',
43505
+ marginBottom: '5px'
43506
+ },
43493
43507
  onChange: function onChange(pageNumber) {
43494
43508
  // Get the range for the current page
43495
43509
  var _getDataRange = getDataRange(pageNumber, viewLength, dataLength),
@@ -43499,10 +43513,10 @@ function TableComponent(tableProps) {
43499
43513
  },
43500
43514
  limit: 5,
43501
43515
  count: Number(dataLength / viewLength)
43502
- }, /*#__PURE__*/React.createElement(Pagination.Next, null, /*#__PURE__*/React.createElement(ChevronRight$1, null)), /*#__PURE__*/React.createElement(Pagination.Previous, null, /*#__PURE__*/React.createElement(ChevronLeft$1, null)))) : null, /*#__PURE__*/React.createElement(_JSXStyle, {
43503
- id: "864348448",
43516
+ }, /*#__PURE__*/React.createElement(Pagination.Next, null, /*#__PURE__*/React.createElement(ChevronRight$1, null)), /*#__PURE__*/React.createElement(Pagination.Previous, null, /*#__PURE__*/React.createElement(ChevronLeft$1, null))))) : null, /*#__PURE__*/React.createElement(_JSXStyle, {
43517
+ id: "2620297225",
43504
43518
  dynamic: [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
43505
- }, "table.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;--table-font-size:".concat(SCALES.font(1), ";font-size:var(--table-font-size);width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}tfoot.__jsx-style-dynamic-selector{bottom:0;z-index:2;background-color:#fff;}"))));
43519
+ }, "table.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;table-layout:fixed;--table-font-size:".concat(SCALES.font(1), ";font-size:var(--table-font-size);width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}tfoot.__jsx-style-dynamic-selector td.__jsx-style-dynamic-selector{position:-webkit-sticky;position:sticky;bottom:0;z-index:2;background-color:#fff;}"))));
43506
43520
  }
43507
43521
  TableComponent.displayName = 'Table';
43508
43522
  TableComponent.Column = TableColumn;
package/dist/table/index.js CHANGED
@@ -19927,9 +19927,10 @@ var TableHead = function TableHead(props) {
19927
19927
  },
19928
19928
  "data-column": Header,
19929
19929
  key: unq_accessor
19930
- }, accessor === 'fixed' && /*#__PURE__*/React.createElement(Select, {
19931
- key: unq_accessor,
19932
- name: filterName,
19930
+ }, accessor === 'fixed' && /*#__PURE__*/React.createElement(Select
19931
+ // key={unq_accessor}
19932
+ // name={filterName}
19933
+ , {
19933
19934
  value: (_filters$filterName = filters[filterName]) !== null && _filters$filterName !== undefined ? _filters$filterName : 'All',
19934
19935
  onChange: function onChange(newValue) {
19935
19936
  return handleFilterChange(filterName, newValue);
@@ -19940,21 +19941,24 @@ var TableHead = function TableHead(props) {
19940
19941
  return /*#__PURE__*/React.createElement(Select.Option, {
19941
19942
  value: option.value
19942
19943
  }, option.name);
19943
- }) : null), accessor === 'date' && /*#__PURE__*/React.createElement(Input, {
19944
- id: "filter-date-".concat(filterName),
19945
- htmlType: "date",
19946
- name: filterName,
19944
+ }) : null), accessor === 'date' && /*#__PURE__*/React.createElement(Input
19945
+ // id={`filter-date-${filterName}`}
19946
+ , {
19947
+ htmlType: "date"
19948
+ // name={filterName}
19949
+ ,
19947
19950
  value: filters[filterName],
19948
19951
  onChange: function onChange(e) {
19949
19952
  return handleFilterChange(filterName, e.target.value);
19950
19953
  }
19951
- }), accessor === 'search' && /*#__PURE__*/React.createElement(Input, {
19952
- id: "filter-search-".concat(filterName),
19954
+ }), accessor === 'search' && /*#__PURE__*/React.createElement(Input
19955
+ // id={`filter-search-${filterName}`}
19956
+ , {
19953
19957
  htmlType: "text",
19954
19958
  autoComplete: "off"
19955
19959
  // ref={filterRefs.current[filterName]} // Dynamically set ref}
19960
+ // name={filterName}
19956
19961
  ,
19957
- name: filterName,
19958
19962
  style: {
19959
19963
  height: 30,
19960
19964
  minWidth: 160
@@ -19969,9 +19973,9 @@ var TableHead = function TableHead(props) {
19969
19973
  });
19970
19974
  };
19971
19975
  return /*#__PURE__*/React.createElement(React.Fragment, null, colgroup, /*#__PURE__*/React.createElement("thead", {
19972
- className: _JSXStyle.dynamic([["318735310", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
19976
+ className: _JSXStyle.dynamic([["500933572", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
19973
19977
  }, /*#__PURE__*/React.createElement("tr", {
19974
- className: _JSXStyle.dynamic([["318735310", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
19978
+ className: _JSXStyle.dynamic([["500933572", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
19975
19979
  }, columns.map(function (column, index) {
19976
19980
  return /*#__PURE__*/React.createElement("th", {
19977
19981
  style: {
@@ -19983,23 +19987,23 @@ var TableHead = function TableHead(props) {
19983
19987
  },
19984
19988
  key: "table-th-".concat(column.prop.toString(), "-").concat(index),
19985
19989
  "data-column": column.label,
19986
- className: _JSXStyle.dynamic([["318735310", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + (column.className || "")
19990
+ className: _JSXStyle.dynamic([["500933572", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + (column.className || "")
19987
19991
  }, /*#__PURE__*/React.createElement("div", {
19988
- className: _JSXStyle.dynamic([["318735310", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + "thead-box"
19992
+ className: _JSXStyle.dynamic([["500933572", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + "thead-box"
19989
19993
  }, column.label, /*#__PURE__*/React.createElement("br", {
19990
- className: _JSXStyle.dynamic([["318735310", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
19994
+ className: _JSXStyle.dynamic([["500933572", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
19991
19995
  }), /*#__PURE__*/React.createElement("span", {
19992
19996
  style: {
19993
19997
  textAlign: 'center'
19994
19998
  },
19995
- className: _JSXStyle.dynamic([["318735310", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
19999
+ className: _JSXStyle.dynamic([["500933572", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
19996
20000
  }, column.text)));
19997
20001
  })), showFilters && /*#__PURE__*/React.createElement("tr", {
19998
- className: _JSXStyle.dynamic([["318735310", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
20002
+ className: _JSXStyle.dynamic([["500933572", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
19999
20003
  }, generateFilterInputs())), /*#__PURE__*/React.createElement(_JSXStyle, {
20000
- id: "318735310",
20001
- dynamic: [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]
20002
- }, "thead.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;font-size:inherit;".concat(stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", ";}th.__jsx-style-dynamic-selector{padding:0 0.5em;font-size:calc(0.75 * var(--table-font-size));font-weight:normal;text-align:left;-webkit-letter-spacing:0;-moz-letter-spacing:0;-ms-letter-spacing:0;letter-spacing:0;vertical-align:middle;min-height:calc(2.5 * var(--table-font-size));color:").concat(theme.palette.accents_5, ";background:").concat(theme.palette.accents_1, ";border-bottom:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-radius:0;").concat(stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", ";}th.__jsx-style-dynamic-selector:nth-child(1){border-bottom:1px solid ").concat(theme.palette.border, ";border-left:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-left-radius:").concat(theme.layout.radius, ";border-bottom-left-radius:").concat(theme.layout.radius, ";}th.__jsx-style-dynamic-selector:last-child{border-bottom:1px solid ").concat(theme.palette.border, ";border-right:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-right-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";}.thead-box.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-align:center;min-height:calc(2.5 * var(--table-font-size));text-transform:uppercase;}")));
20004
+ id: "500933572",
20005
+ dynamic: [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]
20006
+ }, "thead.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;font-size:inherit;".concat(stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", ";}th.__jsx-style-dynamic-selector{padding:0 0.5em;font-size:calc(0.75 * var(--table-font-size));font-weight:normal;text-align:left;-webkit-letter-spacing:0;-moz-letter-spacing:0;-ms-letter-spacing:0;letter-spacing:0;vertical-align:middle;min-height:calc(2.5 * var(--table-font-size));color:").concat(theme.palette.accents_5, ";background:").concat(theme.palette.accents_1, ";border-bottom:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-radius:0;}th.__jsx-style-dynamic-selector:nth-child(1){border-bottom:1px solid ").concat(theme.palette.border, ";border-left:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-left-radius:").concat(theme.layout.radius, ";border-bottom-left-radius:").concat(theme.layout.radius, ";}th.__jsx-style-dynamic-selector:last-child{border-bottom:1px solid ").concat(theme.palette.border, ";border-right:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-right-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";}.thead-box.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-align:center;min-height:calc(2.5 * var(--table-font-size));text-transform:uppercase;}")));
20003
20007
  };
20004
20008
  TableHead.displayName = 'TableHead';
20005
20009
 
@@ -20021,6 +20025,7 @@ var TableCell = function TableCell(_ref) {
20021
20025
  paddingLeft: '0.3rem',
20022
20026
  paddingRight: '0.3rem',
20023
20027
  color: "".concat(column === null || column === undefined ? undefined : column.color),
20028
+ boxSizing: 'border-box',
20024
20029
  whiteSpace: column !== null && column !== undefined && column.noWrap ? 'nowrap' : 'normal'
20025
20030
  }, currentRowValue === null || currentRowValue === undefined ? undefined : currentRowValue.style),
20026
20031
  "data-column": String(column.label).toLowerCase(),
@@ -31985,7 +31990,7 @@ var TableBody = function TableBody(_ref) {
31985
31990
  })))));
31986
31991
  }
31987
31992
  return /*#__PURE__*/React.createElement("tbody", {
31988
- className: _JSXStyle.dynamic([["1229207510", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
31993
+ className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
31989
31994
  }, data.map(function (row, index) {
31990
31995
  var _row$table, _row$table2, _row$table3, _row$table4, _row$table5;
31991
31996
  var qid = _.uniqueId();
@@ -31993,21 +31998,21 @@ var TableBody = function TableBody(_ref) {
31993
31998
  var uid = _.uniqueId();
31994
31999
  return /*#__PURE__*/React.createElement("tr", {
31995
32000
  key: uid,
31996
- className: _JSXStyle.dynamic([["1229207510", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
32001
+ className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
31997
32002
  }, /*#__PURE__*/React.createElement("td", {
31998
32003
  colSpan: columns.length,
31999
- className: _JSXStyle.dynamic([["1229207510", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
32004
+ className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
32000
32005
  }, "\u2003"));
32001
32006
  }
32002
32007
  return /*#__PURE__*/React.createElement(React.Fragment, null, renderRow(columns, row, index), (row === null || row === undefined ? undefined : row.table) && /*#__PURE__*/React.createElement("tr", {
32003
32008
  key: qid,
32004
- className: _JSXStyle.dynamic([["1229207510", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
32009
+ className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
32005
32010
  }, /*#__PURE__*/React.createElement("td", {
32006
32011
  style: {
32007
32012
  padding: '1rem'
32008
32013
  },
32009
32014
  colSpan: columns.length,
32010
- className: _JSXStyle.dynamic([["1229207510", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
32015
+ className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
32011
32016
  }, /*#__PURE__*/React.createElement(DataTable$1, {
32012
32017
  readOnly: true,
32013
32018
  stickyHeader: false,
@@ -32035,9 +32040,9 @@ var TableBody = function TableBody(_ref) {
32035
32040
  // </tr>
32036
32041
  // )
32037
32042
  }), /*#__PURE__*/React.createElement(_JSXStyle, {
32038
- id: "1229207510",
32043
+ id: "1422656197",
32039
32044
  dynamic: [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]
32040
- }, "tbody.__jsx-style-dynamic-selector{display:block;overflow-y:auto;max-height:calc(100vh - 10rem);}tr.__jsx-style-dynamic-selector{-webkit-transition:background-color 0.25s ease;transition:background-color 0.25s ease;font-size:inherit;}tr.hover.__jsx-style-dynamic-selector:hover{background-color:".concat(theme.palette.accents_1, ";}tr.draggable.__jsx-style-dynamic-selector:hover{border:2px dashed #dfdfdf;margin:3px;}tr.__jsx-style-dynamic-selector td{padding:0 0.5em;border-bottom:1px solid ").concat(theme.palette.border, ";color:").concat(theme.palette.accents_6, ";font-size:calc(0.875 * var(--table-font-size));text-align:left;}tr.__jsx-style-dynamic-selector .cell{min-height:calc(3.125 * var(--table-font-size));display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;}")));
32045
+ }, "tr.__jsx-style-dynamic-selector{-webkit-transition:background-color 0.25s ease;transition:background-color 0.25s ease;font-size:inherit;}tr.hover.__jsx-style-dynamic-selector:hover{background-color:".concat(theme.palette.accents_1, ";}tr.draggable.__jsx-style-dynamic-selector:hover{border:2px dashed #dfdfdf;margin:3px;}tr.__jsx-style-dynamic-selector td{padding:0 0.5em;border-bottom:1px solid ").concat(theme.palette.border, ";color:").concat(theme.palette.accents_6, ";font-size:calc(0.875 * var(--table-font-size));text-align:left;}tr.__jsx-style-dynamic-selector .cell{min-height:calc(3.125 * var(--table-font-size));display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;}")));
32041
32046
  };
32042
32047
  TableBody.displayName = 'TableBody';
32043
32048
 
@@ -32523,7 +32528,7 @@ function TableComponent(tableProps) {
32523
32528
  }, /*#__PURE__*/React.createElement("table", _extends({
32524
32529
  ref: ref
32525
32530
  }, props, {
32526
- className: _JSXStyle.dynamic([["864348448", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || className || "")
32531
+ className: _JSXStyle.dynamic([["2620297225", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || className || "")
32527
32532
  }), /*#__PURE__*/React.createElement(TableHead, {
32528
32533
  stickyHeader: stickyHeader,
32529
32534
  columns: columns,
@@ -32541,8 +32546,17 @@ function TableComponent(tableProps) {
32541
32546
  readOnly: readOnly,
32542
32547
  onSelected: onSelected
32543
32548
  }), children, dataLength && viewLength && onPageChange ? /*#__PURE__*/React.createElement("tfoot", {
32544
- className: _JSXStyle.dynamic([["864348448", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
32549
+ className: _JSXStyle.dynamic([["2620297225", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
32550
+ }, /*#__PURE__*/React.createElement("td", {
32551
+ colSpan: columns === null || columns === undefined ? undefined : columns.length,
32552
+ className: _JSXStyle.dynamic([["2620297225", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
32545
32553
  }, /*#__PURE__*/React.createElement(Pagination, {
32554
+ style: {
32555
+ marginLeft: '10px',
32556
+ marginRight: '10px',
32557
+ marginTop: '10px',
32558
+ marginBottom: '5px'
32559
+ },
32546
32560
  onChange: function onChange(pageNumber) {
32547
32561
  // Get the range for the current page
32548
32562
  var _getDataRange = getDataRange(pageNumber, viewLength, dataLength),
@@ -32552,10 +32566,10 @@ function TableComponent(tableProps) {
32552
32566
  },
32553
32567
  limit: 5,
32554
32568
  count: Number(dataLength / viewLength)
32555
- }, /*#__PURE__*/React.createElement(Pagination.Next, null, /*#__PURE__*/React.createElement(ChevronRight$1, null)), /*#__PURE__*/React.createElement(Pagination.Previous, null, /*#__PURE__*/React.createElement(ChevronLeft$1, null)))) : null, /*#__PURE__*/React.createElement(_JSXStyle, {
32556
- id: "864348448",
32569
+ }, /*#__PURE__*/React.createElement(Pagination.Next, null, /*#__PURE__*/React.createElement(ChevronRight$1, null)), /*#__PURE__*/React.createElement(Pagination.Previous, null, /*#__PURE__*/React.createElement(ChevronLeft$1, null))))) : null, /*#__PURE__*/React.createElement(_JSXStyle, {
32570
+ id: "2620297225",
32557
32571
  dynamic: [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
32558
- }, "table.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;--table-font-size:".concat(SCALES.font(1), ";font-size:var(--table-font-size);width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}tfoot.__jsx-style-dynamic-selector{bottom:0;z-index:2;background-color:#fff;}"))));
32572
+ }, "table.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;table-layout:fixed;--table-font-size:".concat(SCALES.font(1), ";font-size:var(--table-font-size);width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}tfoot.__jsx-style-dynamic-selector td.__jsx-style-dynamic-selector{position:-webkit-sticky;position:sticky;bottom:0;z-index:2;background-color:#fff;}"))));
32559
32573
  }
32560
32574
  TableComponent.displayName = 'Table';
32561
32575
  TableComponent.Column = TableColumn;
package/esm/table/table-body.js CHANGED
@@ -125,7 +125,7 @@ var TableBody = function TableBody(_ref) {
125
125
  })))));
126
126
  }
127
127
  return /*#__PURE__*/React.createElement("tbody", {
128
- className: _JSXStyle.dynamic([["1229207510", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
128
+ className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
129
129
  }, data.map(function (row, index) {
130
130
  var _row$table, _row$table2, _row$table3, _row$table4, _row$table5;
131
131
  var qid = _.uniqueId();
@@ -133,21 +133,21 @@ var TableBody = function TableBody(_ref) {
133
133
  var uid = _.uniqueId();
134
134
  return /*#__PURE__*/React.createElement("tr", {
135
135
  key: uid,
136
- className: _JSXStyle.dynamic([["1229207510", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
136
+ className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
137
137
  }, /*#__PURE__*/React.createElement("td", {
138
138
  colSpan: columns.length,
139
- className: _JSXStyle.dynamic([["1229207510", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
139
+ className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
140
140
  }, "\u2003"));
141
141
  }
142
142
  return /*#__PURE__*/React.createElement(React.Fragment, null, renderRow(columns, row, index), (row === null || row === void 0 ? void 0 : row.table) && /*#__PURE__*/React.createElement("tr", {
143
143
  key: qid,
144
- className: _JSXStyle.dynamic([["1229207510", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
144
+ className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
145
145
  }, /*#__PURE__*/React.createElement("td", {
146
146
  style: {
147
147
  padding: '1rem'
148
148
  },
149
149
  colSpan: columns.length,
150
- className: _JSXStyle.dynamic([["1229207510", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
150
+ className: _JSXStyle.dynamic([["1422656197", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
151
151
  }, /*#__PURE__*/React.createElement(DataTable, {
152
152
  readOnly: true,
153
153
  stickyHeader: false,
@@ -175,9 +175,9 @@ var TableBody = function TableBody(_ref) {
175
175
  // </tr>
176
176
  // )
177
177
  }), /*#__PURE__*/React.createElement(_JSXStyle, {
178
- id: "1229207510",
178
+ id: "1422656197",
179
179
  dynamic: [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]
180
- }, "tbody.__jsx-style-dynamic-selector{display:block;overflow-y:auto;max-height:calc(100vh - 10rem);}tr.__jsx-style-dynamic-selector{-webkit-transition:background-color 0.25s ease;transition:background-color 0.25s ease;font-size:inherit;}tr.hover.__jsx-style-dynamic-selector:hover{background-color:".concat(theme.palette.accents_1, ";}tr.draggable.__jsx-style-dynamic-selector:hover{border:2px dashed #dfdfdf;margin:3px;}tr.__jsx-style-dynamic-selector td{padding:0 0.5em;border-bottom:1px solid ").concat(theme.palette.border, ";color:").concat(theme.palette.accents_6, ";font-size:calc(0.875 * var(--table-font-size));text-align:left;}tr.__jsx-style-dynamic-selector .cell{min-height:calc(3.125 * var(--table-font-size));display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;}")));
180
+ }, "tr.__jsx-style-dynamic-selector{-webkit-transition:background-color 0.25s ease;transition:background-color 0.25s ease;font-size:inherit;}tr.hover.__jsx-style-dynamic-selector:hover{background-color:".concat(theme.palette.accents_1, ";}tr.draggable.__jsx-style-dynamic-selector:hover{border:2px dashed #dfdfdf;margin:3px;}tr.__jsx-style-dynamic-selector td{padding:0 0.5em;border-bottom:1px solid ").concat(theme.palette.border, ";color:").concat(theme.palette.accents_6, ";font-size:calc(0.875 * var(--table-font-size));text-align:left;}tr.__jsx-style-dynamic-selector .cell{min-height:calc(3.125 * var(--table-font-size));display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;}")));
181
181
  };
182
182
  TableBody.displayName = 'TableBody';
183
183
  export default TableBody;
package/esm/table/table-cell.js CHANGED
@@ -18,6 +18,7 @@ var TableCell = function TableCell(_ref) {
18
18
  paddingLeft: '0.3rem',
19
19
  paddingRight: '0.3rem',
20
20
  color: "".concat(column === null || column === void 0 ? void 0 : column.color),
21
+ boxSizing: 'border-box',
21
22
  whiteSpace: column !== null && column !== void 0 && column.noWrap ? 'nowrap' : 'normal'
22
23
  }, currentRowValue === null || currentRowValue === void 0 ? void 0 : currentRowValue.style),
23
24
  "data-column": String(column.label).toLowerCase(),
package/esm/table/table-head.js CHANGED
@@ -81,9 +81,10 @@ var TableHead = function TableHead(props) {
81
81
  },
82
82
  "data-column": Header,
83
83
  key: unq_accessor
84
- }, accessor === 'fixed' && /*#__PURE__*/React.createElement(Select, {
85
- key: unq_accessor,
86
- name: filterName,
84
+ }, accessor === 'fixed' && /*#__PURE__*/React.createElement(Select
85
+ // key={unq_accessor}
86
+ // name={filterName}
87
+ , {
87
88
  value: (_filters$filterName = filters[filterName]) !== null && _filters$filterName !== void 0 ? _filters$filterName : 'All',
88
89
  onChange: function onChange(newValue) {
89
90
  return handleFilterChange(filterName, newValue);
@@ -94,21 +95,24 @@ var TableHead = function TableHead(props) {
94
95
  return /*#__PURE__*/React.createElement(Select.Option, {
95
96
  value: option.value
96
97
  }, option.name);
97
- }) : null), accessor === 'date' && /*#__PURE__*/React.createElement(Input, {
98
- id: "filter-date-".concat(filterName),
99
- htmlType: "date",
100
- name: filterName,
98
+ }) : null), accessor === 'date' && /*#__PURE__*/React.createElement(Input
99
+ // id={`filter-date-${filterName}`}
100
+ , {
101
+ htmlType: "date"
102
+ // name={filterName}
103
+ ,
101
104
  value: filters[filterName],
102
105
  onChange: function onChange(e) {
103
106
  return handleFilterChange(filterName, e.target.value);
104
107
  }
105
- }), accessor === 'search' && /*#__PURE__*/React.createElement(Input, {
106
- id: "filter-search-".concat(filterName),
108
+ }), accessor === 'search' && /*#__PURE__*/React.createElement(Input
109
+ // id={`filter-search-${filterName}`}
110
+ , {
107
111
  htmlType: "text",
108
112
  autoComplete: "off"
109
113
  // ref={filterRefs.current[filterName]} // Dynamically set ref}
114
+ // name={filterName}
110
115
  ,
111
- name: filterName,
112
116
  style: {
113
117
  height: 30,
114
118
  minWidth: 160
@@ -123,9 +127,9 @@ var TableHead = function TableHead(props) {
123
127
  });
124
128
  };
125
129
  return /*#__PURE__*/React.createElement(React.Fragment, null, colgroup, /*#__PURE__*/React.createElement("thead", {
126
- className: _JSXStyle.dynamic([["318735310", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
130
+ className: _JSXStyle.dynamic([["500933572", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
127
131
  }, /*#__PURE__*/React.createElement("tr", {
128
- className: _JSXStyle.dynamic([["318735310", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
132
+ className: _JSXStyle.dynamic([["500933572", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
129
133
  }, columns.map(function (column, index) {
130
134
  return /*#__PURE__*/React.createElement("th", {
131
135
  style: {
@@ -137,23 +141,23 @@ var TableHead = function TableHead(props) {
137
141
  },
138
142
  key: "table-th-".concat(column.prop.toString(), "-").concat(index),
139
143
  "data-column": column.label,
140
- className: _JSXStyle.dynamic([["318735310", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + (column.className || "")
144
+ className: _JSXStyle.dynamic([["500933572", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + (column.className || "")
141
145
  }, /*#__PURE__*/React.createElement("div", {
142
- className: _JSXStyle.dynamic([["318735310", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + "thead-box"
146
+ className: _JSXStyle.dynamic([["500933572", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + "thead-box"
143
147
  }, column.label, /*#__PURE__*/React.createElement("br", {
144
- className: _JSXStyle.dynamic([["318735310", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
148
+ className: _JSXStyle.dynamic([["500933572", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
145
149
  }), /*#__PURE__*/React.createElement("span", {
146
150
  style: {
147
151
  textAlign: 'center'
148
152
  },
149
- className: _JSXStyle.dynamic([["318735310", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
153
+ className: _JSXStyle.dynamic([["500933572", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
150
154
  }, column.text)));
151
155
  })), showFilters && /*#__PURE__*/React.createElement("tr", {
152
- className: _JSXStyle.dynamic([["318735310", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
156
+ className: _JSXStyle.dynamic([["500933572", [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
153
157
  }, generateFilterInputs())), /*#__PURE__*/React.createElement(_JSXStyle, {
154
- id: "318735310",
155
- dynamic: [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]
156
- }, "thead.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;font-size:inherit;".concat(stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", ";}th.__jsx-style-dynamic-selector{padding:0 0.5em;font-size:calc(0.75 * var(--table-font-size));font-weight:normal;text-align:left;-webkit-letter-spacing:0;-moz-letter-spacing:0;-ms-letter-spacing:0;letter-spacing:0;vertical-align:middle;min-height:calc(2.5 * var(--table-font-size));color:").concat(theme.palette.accents_5, ";background:").concat(theme.palette.accents_1, ";border-bottom:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-radius:0;").concat(stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", ";}th.__jsx-style-dynamic-selector:nth-child(1){border-bottom:1px solid ").concat(theme.palette.border, ";border-left:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-left-radius:").concat(theme.layout.radius, ";border-bottom-left-radius:").concat(theme.layout.radius, ";}th.__jsx-style-dynamic-selector:last-child{border-bottom:1px solid ").concat(theme.palette.border, ";border-right:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-right-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";}.thead-box.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-align:center;min-height:calc(2.5 * var(--table-font-size));text-transform:uppercase;}")));
158
+ id: "500933572",
159
+ dynamic: [stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]
160
+ }, "thead.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;font-size:inherit;".concat(stickyHeader && "\n position: sticky;\n top: 0;\n background-color: #fff;\n z-index: 1;\n ", ";}th.__jsx-style-dynamic-selector{padding:0 0.5em;font-size:calc(0.75 * var(--table-font-size));font-weight:normal;text-align:left;-webkit-letter-spacing:0;-moz-letter-spacing:0;-ms-letter-spacing:0;letter-spacing:0;vertical-align:middle;min-height:calc(2.5 * var(--table-font-size));color:").concat(theme.palette.accents_5, ";background:").concat(theme.palette.accents_1, ";border-bottom:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-radius:0;}th.__jsx-style-dynamic-selector:nth-child(1){border-bottom:1px solid ").concat(theme.palette.border, ";border-left:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-left-radius:").concat(theme.layout.radius, ";border-bottom-left-radius:").concat(theme.layout.radius, ";}th.__jsx-style-dynamic-selector:last-child{border-bottom:1px solid ").concat(theme.palette.border, ";border-right:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-right-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";}.thead-box.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-align:center;min-height:calc(2.5 * var(--table-font-size));text-transform:uppercase;}")));
157
161
  };
158
162
  TableHead.displayName = 'TableHead';
159
163
  export default TableHead;
package/esm/table/table.js CHANGED
@@ -106,7 +106,7 @@ function TableComponent(tableProps) {
106
106
  }, /*#__PURE__*/React.createElement("table", _extends({
107
107
  ref: ref
108
108
  }, props, {
109
- className: _JSXStyle.dynamic([["864348448", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || className || "")
109
+ className: _JSXStyle.dynamic([["2620297225", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || className || "")
110
110
  }), /*#__PURE__*/React.createElement(TableHead, {
111
111
  stickyHeader: stickyHeader,
112
112
  columns: columns,
@@ -124,8 +124,17 @@ function TableComponent(tableProps) {
124
124
  readOnly: readOnly,
125
125
  onSelected: onSelected
126
126
  }), children, dataLength && viewLength && onPageChange ? /*#__PURE__*/React.createElement("tfoot", {
127
- className: _JSXStyle.dynamic([["864348448", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
127
+ className: _JSXStyle.dynamic([["2620297225", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
128
+ }, /*#__PURE__*/React.createElement("td", {
129
+ colSpan: columns === null || columns === void 0 ? void 0 : columns.length,
130
+ className: _JSXStyle.dynamic([["2620297225", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]])
128
131
  }, /*#__PURE__*/React.createElement(Pagination, {
132
+ style: {
133
+ marginLeft: '10px',
134
+ marginRight: '10px',
135
+ marginTop: '10px',
136
+ marginBottom: '5px'
137
+ },
129
138
  onChange: function onChange(pageNumber) {
130
139
  // Get the range for the current page
131
140
  var _getDataRange = getDataRange(pageNumber, viewLength, dataLength),
@@ -135,10 +144,10 @@ function TableComponent(tableProps) {
135
144
  },
136
145
  limit: 5,
137
146
  count: Number(dataLength / viewLength)
138
- }, /*#__PURE__*/React.createElement(Pagination.Next, null, /*#__PURE__*/React.createElement(ChevronRight, null)), /*#__PURE__*/React.createElement(Pagination.Previous, null, /*#__PURE__*/React.createElement(ChevronLeft, null)))) : null, /*#__PURE__*/React.createElement(_JSXStyle, {
139
- id: "864348448",
147
+ }, /*#__PURE__*/React.createElement(Pagination.Next, null, /*#__PURE__*/React.createElement(ChevronRight, null)), /*#__PURE__*/React.createElement(Pagination.Previous, null, /*#__PURE__*/React.createElement(ChevronLeft, null))))) : null, /*#__PURE__*/React.createElement(_JSXStyle, {
148
+ id: "2620297225",
140
149
  dynamic: [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
141
- }, "table.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;--table-font-size:".concat(SCALES.font(1), ";font-size:var(--table-font-size);width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}tfoot.__jsx-style-dynamic-selector{bottom:0;z-index:2;background-color:#fff;}"))));
150
+ }, "table.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;table-layout:fixed;--table-font-size:".concat(SCALES.font(1), ";font-size:var(--table-font-size);width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}tfoot.__jsx-style-dynamic-selector td.__jsx-style-dynamic-selector{position:-webkit-sticky;position:sticky;bottom:0;z-index:2;background-color:#fff;}"))));
142
151
  }
143
152
  TableComponent.displayName = 'Table';
144
153
  TableComponent.Column = TableColumn;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@helpdice/ui",
3
- "version": "1.3.8",
3
+ "version": "1.4.0",
4
4
  "main": "dist/index.js",
5
5
  "types": "esm/index.d.ts",
6
6
  "unpkg": "dist/index.min.js",