@helpdice/ui 1.4.3 → 1.4.4

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 (11) hide show
  1. package/dist/index.js +15 -8
  2. package/dist/table/index.js +15 -8
  3. package/dist/table/table-column.d.ts +2 -1
  4. package/dist/table/table-types.d.ts +3 -2
  5. package/esm/table/data-table.js +3 -1
  6. package/esm/table/table-body.js +3 -3
  7. package/esm/table/table-column.d.ts +2 -1
  8. package/esm/table/table-column.js +3 -1
  9. package/esm/table/table-head.js +6 -3
  10. package/esm/table/table-types.d.ts +3 -2
  11. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -42217,18 +42217,21 @@ var TableHead = function TableHead(props) {
42217
42217
  return /*#__PURE__*/React.createElement(React.Fragment, null, colgroup, /*#__PURE__*/React.createElement("thead", {
42218
42218
  className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n position: sticky;\n top: 0;\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]]])
42219
42219
  }, /*#__PURE__*/React.createElement("tr", {
42220
+ style: {
42221
+ backgroundColor: '#fff'
42222
+ },
42220
42223
  className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n position: sticky;\n top: 0;\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]]])
42221
42224
  }, columns.map(function (column, index) {
42222
42225
  var _String2;
42223
42226
  var dataName = (_String2 = String(column === null || column === undefined ? undefined : column.label)) === null || _String2 === undefined ? undefined : _String2.replace(' ', '_').toLowerCase();
42224
42227
  return /*#__PURE__*/React.createElement("th", {
42225
- style: {
42228
+ style: _objectSpread2({
42226
42229
  // textAlign: `${column?.align} !important`,
42227
42230
  // paddingLeft: '0.3rem',
42228
42231
  // paddingRight: '0.3rem',
42229
- // color: `${column?.color}`,
42232
+ color: "".concat(column !== null && column !== undefined && column.color ? column === null || column === undefined ? undefined : column.color : '#fff'),
42230
42233
  whiteSpace: column !== null && column !== undefined && column.noWrap ? 'nowrap' : 'normal'
42231
- },
42234
+ }, column === null || column === undefined ? undefined : column.style),
42232
42235
  key: "table-th-".concat(column.prop.toString(), "-").concat(index),
42233
42236
  "data-column": dataName,
42234
42237
  className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n position: sticky;\n top: 0;\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 || "")
@@ -43030,7 +43033,8 @@ function DataTable(_ref) {
43030
43033
  style: {
43031
43034
  display: 'flex',
43032
43035
  alignItems: 'center',
43033
- gap: '1rem'
43036
+ gap: '1rem',
43037
+ fontSize: 'larger'
43034
43038
  }
43035
43039
  }, children && /*#__PURE__*/React.createElement(Button, {
43036
43040
  auto: true,
@@ -43184,6 +43188,7 @@ function DataTable(_ref) {
43184
43188
  }
43185
43189
  }, COLUMNS.map(function (column, index) {
43186
43190
  return /*#__PURE__*/React.createElement(Table.Column, {
43191
+ style: column === null || column === undefined ? undefined : column.style,
43187
43192
  options: column === null || column === undefined ? undefined : column.options,
43188
43193
  fontSize: column === null || column === undefined ? undefined : column.fontSize,
43189
43194
  key: "".concat(column.id, "-").concat(index),
@@ -43292,7 +43297,7 @@ var TableBody = function TableBody(_ref) {
43292
43297
  }
43293
43298
  }
43294
43299
  },
43295
- className: _JSXStyle.dynamic([["2019708038", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]]) + " " + (useClasses("".concat(rowDraggable ? 'draggable' : 'hover', " ").concat(className)) || "")
43300
+ className: _JSXStyle.dynamic([["787902152", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]]) + " " + (useClasses("".concat(rowDraggable ? 'draggable' : 'hover', " ").concat(className)) || "")
43296
43301
  }, /*#__PURE__*/React.createElement(TableCell, {
43297
43302
  columns: cols,
43298
43303
  row: rw,
@@ -43300,9 +43305,9 @@ var TableBody = function TableBody(_ref) {
43300
43305
  emptyText: emptyText,
43301
43306
  onCellClick: onCell
43302
43307
  })), /*#__PURE__*/React.createElement(_JSXStyle, {
43303
- id: "2019708038",
43308
+ id: "787902152",
43304
43309
  dynamic: [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]
43305
- }, "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;}")));
43310
+ }, "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(2.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;}")));
43306
43311
  }
43307
43312
  if ((data === null || data === undefined ? undefined : data.length) === 0) {
43308
43313
  return /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
@@ -43381,6 +43386,7 @@ var TableColumn = function TableColumn(columnProps) {
43381
43386
  options = _ref.options,
43382
43387
  noWrap = _ref.noWrap,
43383
43388
  align = _ref.align,
43389
+ style = _ref.style,
43384
43390
  _ref$fontSize = _ref.fontSize,
43385
43391
  fontSize = _ref$fontSize === undefined ? 'smaller' : _ref$fontSize,
43386
43392
  _ref$className = _ref.className,
@@ -43403,9 +43409,10 @@ var TableColumn = function TableColumn(columnProps) {
43403
43409
  align: align,
43404
43410
  fontSize: fontSize,
43405
43411
  className: className,
43412
+ style: style,
43406
43413
  renderHandler: function renderHandler() {}
43407
43414
  });
43408
- }, [children, noWrap, fontSize, align, filter, options, label, prop, width, className, renderHandler]);
43415
+ }, [children, noWrap, style, fontSize, align, filter, options, label, prop, width, className, renderHandler]);
43409
43416
  return null;
43410
43417
  };
43411
43418
  TableColumn.displayName = 'TableColumn';
package/dist/table/index.js CHANGED
@@ -19975,18 +19975,21 @@ var TableHead = function TableHead(props) {
19975
19975
  return /*#__PURE__*/React.createElement(React.Fragment, null, colgroup, /*#__PURE__*/React.createElement("thead", {
19976
19976
  className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n position: sticky;\n top: 0;\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]]])
19977
19977
  }, /*#__PURE__*/React.createElement("tr", {
19978
+ style: {
19979
+ backgroundColor: '#fff'
19980
+ },
19978
19981
  className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n position: sticky;\n top: 0;\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]]])
19979
19982
  }, columns.map(function (column, index) {
19980
19983
  var _String2;
19981
19984
  var dataName = (_String2 = String(column === null || column === undefined ? undefined : column.label)) === null || _String2 === undefined ? undefined : _String2.replace(' ', '_').toLowerCase();
19982
19985
  return /*#__PURE__*/React.createElement("th", {
19983
- style: {
19986
+ style: _objectSpread2({
19984
19987
  // textAlign: `${column?.align} !important`,
19985
19988
  // paddingLeft: '0.3rem',
19986
19989
  // paddingRight: '0.3rem',
19987
- // color: `${column?.color}`,
19990
+ color: "".concat(column !== null && column !== undefined && column.color ? column === null || column === undefined ? undefined : column.color : '#fff'),
19988
19991
  whiteSpace: column !== null && column !== undefined && column.noWrap ? 'nowrap' : 'normal'
19989
- },
19992
+ }, column === null || column === undefined ? undefined : column.style),
19990
19993
  key: "table-th-".concat(column.prop.toString(), "-").concat(index),
19991
19994
  "data-column": dataName,
19992
19995
  className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n position: sticky;\n top: 0;\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 || "")
@@ -31733,7 +31736,8 @@ function DataTable(_ref) {
31733
31736
  style: {
31734
31737
  display: 'flex',
31735
31738
  alignItems: 'center',
31736
- gap: '1rem'
31739
+ gap: '1rem',
31740
+ fontSize: 'larger'
31737
31741
  }
31738
31742
  }, children && /*#__PURE__*/React.createElement(Button, {
31739
31743
  auto: true,
@@ -31887,6 +31891,7 @@ function DataTable(_ref) {
31887
31891
  }
31888
31892
  }, COLUMNS.map(function (column, index) {
31889
31893
  return /*#__PURE__*/React.createElement(Table.Column, {
31894
+ style: column === null || column === undefined ? undefined : column.style,
31890
31895
  options: column === null || column === undefined ? undefined : column.options,
31891
31896
  fontSize: column === null || column === undefined ? undefined : column.fontSize,
31892
31897
  key: "".concat(column.id, "-").concat(index),
@@ -31995,7 +32000,7 @@ var TableBody = function TableBody(_ref) {
31995
32000
  }
31996
32001
  }
31997
32002
  },
31998
- className: _JSXStyle.dynamic([["2019708038", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]]) + " " + (useClasses("".concat(rowDraggable ? 'draggable' : 'hover', " ").concat(className)) || "")
32003
+ className: _JSXStyle.dynamic([["787902152", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]]) + " " + (useClasses("".concat(rowDraggable ? 'draggable' : 'hover', " ").concat(className)) || "")
31999
32004
  }, /*#__PURE__*/React.createElement(TableCell, {
32000
32005
  columns: cols,
32001
32006
  row: rw,
@@ -32003,9 +32008,9 @@ var TableBody = function TableBody(_ref) {
32003
32008
  emptyText: emptyText,
32004
32009
  onCellClick: onCell
32005
32010
  })), /*#__PURE__*/React.createElement(_JSXStyle, {
32006
- id: "2019708038",
32011
+ id: "787902152",
32007
32012
  dynamic: [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]
32008
- }, "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;}")));
32013
+ }, "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(2.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;}")));
32009
32014
  }
32010
32015
  if ((data === null || data === undefined ? undefined : data.length) === 0) {
32011
32016
  return /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
@@ -32127,6 +32132,7 @@ var TableColumn = function TableColumn(columnProps) {
32127
32132
  options = _ref.options,
32128
32133
  noWrap = _ref.noWrap,
32129
32134
  align = _ref.align,
32135
+ style = _ref.style,
32130
32136
  _ref$fontSize = _ref.fontSize,
32131
32137
  fontSize = _ref$fontSize === undefined ? 'smaller' : _ref$fontSize,
32132
32138
  _ref$className = _ref.className,
@@ -32149,9 +32155,10 @@ var TableColumn = function TableColumn(columnProps) {
32149
32155
  align: align,
32150
32156
  fontSize: fontSize,
32151
32157
  className: className,
32158
+ style: style,
32152
32159
  renderHandler: function renderHandler() {}
32153
32160
  });
32154
- }, [children, noWrap, fontSize, align, filter, options, label, prop, width, className, renderHandler]);
32161
+ }, [children, noWrap, style, fontSize, align, filter, options, label, prop, width, className, renderHandler]);
32155
32162
  return null;
32156
32163
  };
32157
32164
  TableColumn.displayName = 'TableColumn';
package/dist/table/table-column.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ import React, { CSSProperties } from 'react';
2
2
  import { TableColumnRender, TableDataItemBase } from './table-types';
3
3
  export type TableColumnProps<TableDataItem extends TableDataItemBase> = {
4
4
  prop: keyof TableDataItem;
@@ -9,6 +9,7 @@ export type TableColumnProps<TableDataItem extends TableDataItemBase> = {
9
9
  className?: string;
10
10
  noWrap?: boolean;
11
11
  align?: string;
12
+ style?: CSSProperties;
12
13
  fontSize?: string | number;
13
14
  render?: TableColumnRender<TableDataItem>;
14
15
  };
package/dist/table/table-types.d.ts CHANGED
@@ -1,14 +1,15 @@
1
- import React from 'react';
1
+ import React, { CSSProperties } from 'react';
2
2
  export type TableDataItemBase = Record<string, any>;
3
3
  export type TableColumnRender<Item extends TableDataItemBase> = (value: Item[keyof Item], rowData: Item, rowIndex: number) => JSX.Element | void;
4
4
  export type TableAbstractColumn<TableDataItem> = {
5
+ style: CSSProperties | undefined;
5
6
  prop: keyof TableDataItem;
6
7
  label: React.ReactNode | string;
7
8
  text?: React.ReactNode | string;
8
9
  filter?: string;
9
10
  className: string;
10
11
  width?: number;
11
- align?: string;
12
+ align?: any;
12
13
  color?: string;
13
14
  noWrap?: boolean;
14
15
  fontSize?: string | number;
package/esm/table/data-table.js CHANGED
@@ -192,7 +192,8 @@ function DataTable(_ref) {
192
192
  style: {
193
193
  display: 'flex',
194
194
  alignItems: 'center',
195
- gap: '1rem'
195
+ gap: '1rem',
196
+ fontSize: 'larger'
196
197
  }
197
198
  }, children && /*#__PURE__*/React.createElement(Button, {
198
199
  auto: true,
@@ -346,6 +347,7 @@ function DataTable(_ref) {
346
347
  }
347
348
  }, COLUMNS.map(function (column, index) {
348
349
  return /*#__PURE__*/React.createElement(Table.Column, {
350
+ style: column === null || column === void 0 ? void 0 : column.style,
349
351
  options: column === null || column === void 0 ? void 0 : column.options,
350
352
  fontSize: column === null || column === void 0 ? void 0 : column.fontSize,
351
353
  key: "".concat(column.id, "-").concat(index),
package/esm/table/table-body.js CHANGED
@@ -104,7 +104,7 @@ var TableBody = function TableBody(_ref) {
104
104
  }
105
105
  }
106
106
  },
107
- className: _JSXStyle.dynamic([["2019708038", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]]) + " " + (useClasses("".concat(rowDraggable ? 'draggable' : 'hover', " ").concat(className)) || "")
107
+ className: _JSXStyle.dynamic([["787902152", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]]) + " " + (useClasses("".concat(rowDraggable ? 'draggable' : 'hover', " ").concat(className)) || "")
108
108
  }, /*#__PURE__*/React.createElement(TableCell, {
109
109
  columns: cols,
110
110
  row: rw,
@@ -112,9 +112,9 @@ var TableBody = function TableBody(_ref) {
112
112
  emptyText: emptyText,
113
113
  onCellClick: onCell
114
114
  })), /*#__PURE__*/React.createElement(_JSXStyle, {
115
- id: "2019708038",
115
+ id: "787902152",
116
116
  dynamic: [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]
117
- }, "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;}")));
117
+ }, "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(2.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;}")));
118
118
  }
119
119
  if ((data === null || data === void 0 ? void 0 : data.length) === 0) {
120
120
  return /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
package/esm/table/table-column.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ import React, { CSSProperties } from 'react';
2
2
  import { TableColumnRender, TableDataItemBase } from './table-types';
3
3
  export type TableColumnProps<TableDataItem extends TableDataItemBase> = {
4
4
  prop: keyof TableDataItem;
@@ -9,6 +9,7 @@ export type TableColumnProps<TableDataItem extends TableDataItemBase> = {
9
9
  className?: string;
10
10
  noWrap?: boolean;
11
11
  align?: string;
12
+ style?: CSSProperties;
12
13
  fontSize?: string | number;
13
14
  render?: TableColumnRender<TableDataItem>;
14
15
  };
package/esm/table/table-column.js CHANGED
@@ -13,6 +13,7 @@ var TableColumn = function TableColumn(columnProps) {
13
13
  options = _ref.options,
14
14
  noWrap = _ref.noWrap,
15
15
  align = _ref.align,
16
+ style = _ref.style,
16
17
  _ref$fontSize = _ref.fontSize,
17
18
  fontSize = _ref$fontSize === void 0 ? 'smaller' : _ref$fontSize,
18
19
  _ref$className = _ref.className,
@@ -35,9 +36,10 @@ var TableColumn = function TableColumn(columnProps) {
35
36
  align: align,
36
37
  fontSize: fontSize,
37
38
  className: className,
39
+ style: style,
38
40
  renderHandler: function renderHandler() {}
39
41
  });
40
- }, [children, noWrap, fontSize, align, filter, options, label, prop, width, className, renderHandler]);
42
+ }, [children, noWrap, style, fontSize, align, filter, options, label, prop, width, className, renderHandler]);
41
43
  return null;
42
44
  };
43
45
  TableColumn.displayName = 'TableColumn';
package/esm/table/table-head.js CHANGED
@@ -129,18 +129,21 @@ var TableHead = function TableHead(props) {
129
129
  return /*#__PURE__*/React.createElement(React.Fragment, null, colgroup, /*#__PURE__*/React.createElement("thead", {
130
130
  className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n position: sticky;\n top: 0;\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]]])
131
131
  }, /*#__PURE__*/React.createElement("tr", {
132
+ style: {
133
+ backgroundColor: '#fff'
134
+ },
132
135
  className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n position: sticky;\n top: 0;\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]]])
133
136
  }, columns.map(function (column, index) {
134
137
  var _String2;
135
138
  var dataName = (_String2 = String(column === null || column === void 0 ? void 0 : column.label)) === null || _String2 === void 0 ? void 0 : _String2.replace(' ', '_').toLowerCase();
136
139
  return /*#__PURE__*/React.createElement("th", {
137
- style: {
140
+ style: _extends({
138
141
  // textAlign: `${column?.align} !important`,
139
142
  // paddingLeft: '0.3rem',
140
143
  // paddingRight: '0.3rem',
141
- // color: `${column?.color}`,
144
+ color: "".concat(column !== null && column !== void 0 && column.color ? column === null || column === void 0 ? void 0 : column.color : '#fff'),
142
145
  whiteSpace: column !== null && column !== void 0 && column.noWrap ? 'nowrap' : 'normal'
143
- },
146
+ }, column === null || column === void 0 ? void 0 : column.style),
144
147
  key: "table-th-".concat(column.prop.toString(), "-").concat(index),
145
148
  "data-column": dataName,
146
149
  className: _JSXStyle.dynamic([["2156261549", [stickyHeader && "\n position: sticky;\n top: 0;\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 || "")
package/esm/table/table-types.d.ts CHANGED
@@ -1,14 +1,15 @@
1
- import React from 'react';
1
+ import React, { CSSProperties } from 'react';
2
2
  export type TableDataItemBase = Record<string, any>;
3
3
  export type TableColumnRender<Item extends TableDataItemBase> = (value: Item[keyof Item], rowData: Item, rowIndex: number) => JSX.Element | void;
4
4
  export type TableAbstractColumn<TableDataItem> = {
5
+ style: CSSProperties | undefined;
5
6
  prop: keyof TableDataItem;
6
7
  label: React.ReactNode | string;
7
8
  text?: React.ReactNode | string;
8
9
  filter?: string;
9
10
  className: string;
10
11
  width?: number;
11
- align?: string;
12
+ align?: any;
12
13
  color?: string;
13
14
  noWrap?: boolean;
14
15
  fontSize?: string | number;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@helpdice/ui",
3
- "version": "1.4.3",
3
+ "version": "1.4.4",
4
4
  "main": "dist/index.js",
5
5
  "types": "esm/index.d.ts",
6
6
  "unpkg": "dist/index.min.js",