@pdg/react-table 1.0.123 → 1.0.124

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/Table/Table.types.d.ts +8 -8
  2. package/dist/TableFooterCell/TableFooterCell.types.d.ts +3 -2
  3. package/dist/TableHeadCell/TableHeadCell.types.d.ts +3 -2
  4. package/dist/TableTopHead/TableTopHead.types.d.ts +3 -2
  5. package/dist/index.esm.js +13 -13
  6. package/dist/index.js +13 -13
  7. package/package.json +1 -1
package/dist/Table/Table.types.d.ts CHANGED
@@ -41,10 +41,10 @@ export interface TableColumn<T = TableItem> {
41
41
  style?: TableCommonSxProps['style'];
42
42
  backgroundColor?: CSSProperties['backgroundColor'];
43
43
  sx?: TableCommonSxProps['sx'];
44
- onGetClassName?(): TableCommonSxProps['className'];
45
- onGetStyle?(): TableCommonSxProps['style'];
46
- onGetSx?(): TableCommonSxProps['sx'];
47
- onRender?(): ReactNode;
44
+ onGetClassName?(items?: T[]): TableCommonSxProps['className'];
45
+ onGetStyle?(items?: T[]): TableCommonSxProps['style'];
46
+ onGetSx?(items?: T[]): TableCommonSxProps['sx'];
47
+ onRender?(items?: T[]): ReactNode;
48
48
  };
49
49
  footer?: {
50
50
  value?: ReactNode;
@@ -52,10 +52,10 @@ export interface TableColumn<T = TableItem> {
52
52
  style?: TableCommonSxProps['style'];
53
53
  backgroundColor?: CSSProperties['backgroundColor'];
54
54
  sx?: TableCommonSxProps['sx'];
55
- onGetClassName?(): TableCommonSxProps['className'];
56
- onGetStyle?(): TableCommonSxProps['style'];
57
- onGetSx?(): TableCommonSxProps['sx'];
58
- onRender?(): ReactNode;
55
+ onGetClassName?(items?: T[]): TableCommonSxProps['className'];
56
+ onGetStyle?(items?: T[]): TableCommonSxProps['style'];
57
+ onGetSx?(items?: T[]): TableCommonSxProps['sx'];
58
+ onRender?(items?: T[]): ReactNode;
59
59
  };
60
60
  className?: TableCommonSxProps['className'];
61
61
  style?: TableCommonSxProps['style'];
package/dist/TableFooterCell/TableFooterCell.types.d.ts CHANGED
@@ -1,5 +1,6 @@
1
- import { TableColumn, TableProps } from '../Table/Table.types';
2
- export interface TableFooterCellProps {
1
+ import { TableColumn, TableItem, TableProps } from '../Table/Table.types';
2
+ export interface TableFooterCellProps<T = TableItem> {
3
3
  column: TableColumn;
4
+ items?: T[];
4
5
  defaultAlign?: TableProps['defaultAlign'];
5
6
  }
package/dist/TableHeadCell/TableHeadCell.types.d.ts CHANGED
@@ -1,10 +1,11 @@
1
- import { TableColumn, TableProps } from '../Table/Table.types';
1
+ import { TableColumn, TableItem, TableProps } from '../Table/Table.types';
2
2
  export interface TableHeadCellCommands {
3
3
  setChecked(checked: boolean): void;
4
4
  setCheckDisabled(checkDisabled: boolean): void;
5
5
  }
6
- export interface TableHeadCellProps {
6
+ export interface TableHeadCellProps<T = TableItem> {
7
7
  column: TableColumn;
8
+ items?: T[];
8
9
  defaultAlign?: TableProps['defaultAlign'];
9
10
  top?: number;
10
11
  onCheckChange(column: TableColumn, checked: boolean): void;
package/dist/TableTopHead/TableTopHead.types.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { ReactNode } from 'react';
2
2
  import { TableCellProps } from '@mui/material';
3
- import { TableColumn, TableProps } from '../Table/Table.types';
3
+ import { TableColumn, TableItem, TableProps } from '../Table/Table.types';
4
4
  export interface TableTopHeadRowColumn {
5
5
  colSpan?: number;
6
6
  rowSpan?: number;
@@ -8,10 +8,11 @@ export interface TableTopHeadRowColumn {
8
8
  align?: TableCellProps['align'];
9
9
  }
10
10
  export type TableTopHeadRowColumnValue = TableTopHeadRowColumn | false | undefined | null;
11
- export interface TableTopHeadProps {
11
+ export interface TableTopHeadProps<T = TableItem> {
12
12
  caption?: ReactNode;
13
13
  rows?: TableTopHeadRowColumnValue[] | TableTopHeadRowColumnValue[][];
14
14
  columns: TableColumn[];
15
+ items?: T[];
15
16
  defaultAlign: TableProps['defaultAlign'];
16
17
  onCheckChange(column: TableColumn, checked: boolean): void;
17
18
  }
package/dist/index.esm.js CHANGED
@@ -562,16 +562,16 @@ var TableBodyRow = function (_a) {
562
562
  /********************************************************************************************************************
563
563
  * Memo
564
564
  * ******************************************************************************************************************/
565
- var column = _a.column, defaultAlign = _a.defaultAlign;
565
+ var column = _a.column, items = _a.items, defaultAlign = _a.defaultAlign;
566
566
  var data = useMemo(function () {
567
567
  var _a, _b, _c;
568
568
  if ((_a = column.footer) === null || _a === void 0 ? void 0 : _a.onRender) {
569
- return (_b = column.footer) === null || _b === void 0 ? void 0 : _b.onRender();
569
+ return (_b = column.footer) === null || _b === void 0 ? void 0 : _b.onRender(items);
570
570
  }
571
571
  else {
572
572
  return (_c = column.footer) === null || _c === void 0 ? void 0 : _c.value;
573
573
  }
574
- }, [column]);
574
+ }, [column.footer, items]);
575
575
  /********************************************************************************************************************
576
576
  * Render
577
577
  * ******************************************************************************************************************/
@@ -599,7 +599,7 @@ var TableBodyRow = function (_a) {
599
599
  /********************************************************************************************************************
600
600
  * Use
601
601
  * ******************************************************************************************************************/
602
- var column = _a.column, defaultAlign = _a.defaultAlign, top = _a.top, onCheckChange = _a.onCheckChange;
602
+ var column = _a.column, items = _a.items, defaultAlign = _a.defaultAlign, top = _a.top, onCheckChange = _a.onCheckChange;
603
603
  var _b = useTableState(), setHeadColumnChecked = _b.setHeadColumnChecked, setHeadColumnCommands = _b.setHeadColumnCommands;
604
604
  /********************************************************************************************************************
605
605
  * State
@@ -636,7 +636,7 @@ var TableBodyRow = function (_a) {
636
636
  if (column.type === 'check') {
637
637
  if (column.hideAllCheck) {
638
638
  if ((_a = column.head) === null || _a === void 0 ? void 0 : _a.onRender) {
639
- return (_b = column.head) === null || _b === void 0 ? void 0 : _b.onRender();
639
+ return (_b = column.head) === null || _b === void 0 ? void 0 : _b.onRender(items);
640
640
  }
641
641
  else {
642
642
  if (typeof column.label === 'string') {
@@ -656,7 +656,7 @@ var TableBodyRow = function (_a) {
656
656
  }
657
657
  else {
658
658
  if ((_c = column.head) === null || _c === void 0 ? void 0 : _c.onRender) {
659
- return (_d = column.head) === null || _d === void 0 ? void 0 : _d.onRender();
659
+ return (_d = column.head) === null || _d === void 0 ? void 0 : _d.onRender(items);
660
660
  }
661
661
  else {
662
662
  if (typeof column.label === 'string') {
@@ -667,7 +667,7 @@ var TableBodyRow = function (_a) {
667
667
  }
668
668
  }
669
669
  }
670
- }, [checkDisabled, checked, column, onCheckChange]);
670
+ }, [checkDisabled, checked, column, items, onCheckChange]);
671
671
  /********************************************************************************************************************
672
672
  * Render
673
673
  * ******************************************************************************************************************/
@@ -677,7 +677,7 @@ var TableTopHead = function (_a) {
677
677
  /********************************************************************************************************************
678
678
  * Use
679
679
  * ******************************************************************************************************************/
680
- var columns = _a.columns, rows = _a.rows, caption = _a.caption, defaultAlign = _a.defaultAlign, onCheckChange = _a.onCheckChange;
680
+ var columns = _a.columns, items = _a.items, rows = _a.rows, caption = _a.caption, defaultAlign = _a.defaultAlign, onCheckChange = _a.onCheckChange;
681
681
  var theme = useTheme();
682
682
  /********************************************************************************************************************
683
683
  * Ref
@@ -722,8 +722,8 @@ var TableTopHead = function (_a) {
722
722
  }, [columns, theme.palette.divider]);
723
723
  var columnRow = useMemo(function () {
724
724
  var top = (captionHeight || 0) + (row1Height || 0) + (row2Height || 0) + (row3Height || 0);
725
- return (React.createElement(TableRow, null, columns.map(function (column, idx) { return (React.createElement(TableHeadCell, { key: idx, column: column, defaultAlign: defaultAlign, top: top, onCheckChange: onCheckChange })); })));
726
- }, [captionHeight, columns, defaultAlign, onCheckChange, row1Height, row2Height, row3Height]);
725
+ return (React.createElement(TableRow, null, columns.map(function (column, idx) { return (React.createElement(TableHeadCell, { key: idx, column: column, items: items, defaultAlign: defaultAlign, top: top, onCheckChange: onCheckChange })); })));
726
+ }, [captionHeight, columns, defaultAlign, items, onCheckChange, row1Height, row2Height, row3Height]);
727
727
  /********************************************************************************************************************
728
728
  * Variable
729
729
  * ******************************************************************************************************************/
@@ -1275,7 +1275,7 @@ var Table = React.forwardRef(function (_a, ref) {
1275
1275
  if (fullHeight) {
1276
1276
  pagingStyle.position = 'sticky';
1277
1277
  }
1278
- var tableTopHead = finalColumns && (React.createElement(TableTopHead, { caption: caption, rows: topHeadRows, columns: finalColumns, defaultAlign: defaultAlign, onCheckChange: handleHeadCheckChange }));
1278
+ var tableTopHead = finalColumns && (React.createElement(TableTopHead, { caption: caption, rows: topHeadRows, columns: finalColumns, items: items, defaultAlign: defaultAlign, onCheckChange: handleHeadCheckChange }));
1279
1279
  var tableBody = useMemo(function () {
1280
1280
  return finalColumns && (React.createElement(TableBody, null, sortableItems ? (sortableItems.length > 0 ? (React.createElement(SortableContext, { items: sortableItems, strategy: verticalListSortingStrategy }, sortableItems.map(function (item, idx) { return (React.createElement(TableBodyRow, { key: item.id, className: classNames(!!showOddColor && 'odd-color', !!showEvenColor && 'even-color', onGetBodyRowClassName ? onGetBodyRowClassName(item, idx) : undefined), style: onGetBodyRowStyle ? onGetBodyRowStyle(item, idx) : undefined, sx: onGetBodyRowSx ? onGetBodyRowSx(item, idx) : undefined, onGetColumnClassName: onGetBodyColumnClassName, onGetColumnStyle: onGetBodyColumnStyle, onGetColumnSx: onGetBodyColumnSx, hover: true, id: item.id, index: idx, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, sortable: sortable, columns: finalColumns, item: item, onClick: onClick, onCheckChange: handleBodyCheckChange })); }))) : (React.createElement(StyledBodyRow$1, null,
1281
1281
  React.createElement(TableCell, { colSpan: finalColumns.length, style: { flex: 1 } }, noData ? (noData) : (React.createElement(StyledNoDataDiv, null,
@@ -1304,8 +1304,8 @@ var Table = React.forwardRef(function (_a, ref) {
1304
1304
  return finalColumns &&
1305
1305
  !isNoData &&
1306
1306
  footer && (React.createElement(TableFooter, null,
1307
- React.createElement(TableRow, null, finalColumns.map(function (column, idx) { return (React.createElement(TableFooterCell, { key: idx, column: column, defaultAlign: defaultAlign })); }))));
1308
- }, [defaultAlign, finalColumns, footer, isNoData]);
1307
+ React.createElement(TableRow, null, finalColumns.map(function (column, idx) { return (React.createElement(TableFooterCell, { key: idx, column: column, items: items, defaultAlign: defaultAlign })); }))));
1308
+ }, [defaultAlign, finalColumns, footer, isNoData, items]);
1309
1309
  /********************************************************************************************************************
1310
1310
  * Render
1311
1311
  * ******************************************************************************************************************/
package/dist/index.js CHANGED
@@ -562,16 +562,16 @@ var TableBodyRow = function (_a) {
562
562
  /********************************************************************************************************************
563
563
  * Memo
564
564
  * ******************************************************************************************************************/
565
- var column = _a.column, defaultAlign = _a.defaultAlign;
565
+ var column = _a.column, items = _a.items, defaultAlign = _a.defaultAlign;
566
566
  var data = React.useMemo(function () {
567
567
  var _a, _b, _c;
568
568
  if ((_a = column.footer) === null || _a === void 0 ? void 0 : _a.onRender) {
569
- return (_b = column.footer) === null || _b === void 0 ? void 0 : _b.onRender();
569
+ return (_b = column.footer) === null || _b === void 0 ? void 0 : _b.onRender(items);
570
570
  }
571
571
  else {
572
572
  return (_c = column.footer) === null || _c === void 0 ? void 0 : _c.value;
573
573
  }
574
- }, [column]);
574
+ }, [column.footer, items]);
575
575
  /********************************************************************************************************************
576
576
  * Render
577
577
  * ******************************************************************************************************************/
@@ -599,7 +599,7 @@ var TableBodyRow = function (_a) {
599
599
  /********************************************************************************************************************
600
600
  * Use
601
601
  * ******************************************************************************************************************/
602
- var column = _a.column, defaultAlign = _a.defaultAlign, top = _a.top, onCheckChange = _a.onCheckChange;
602
+ var column = _a.column, items = _a.items, defaultAlign = _a.defaultAlign, top = _a.top, onCheckChange = _a.onCheckChange;
603
603
  var _b = useTableState(), setHeadColumnChecked = _b.setHeadColumnChecked, setHeadColumnCommands = _b.setHeadColumnCommands;
604
604
  /********************************************************************************************************************
605
605
  * State
@@ -636,7 +636,7 @@ var TableBodyRow = function (_a) {
636
636
  if (column.type === 'check') {
637
637
  if (column.hideAllCheck) {
638
638
  if ((_a = column.head) === null || _a === void 0 ? void 0 : _a.onRender) {
639
- return (_b = column.head) === null || _b === void 0 ? void 0 : _b.onRender();
639
+ return (_b = column.head) === null || _b === void 0 ? void 0 : _b.onRender(items);
640
640
  }
641
641
  else {
642
642
  if (typeof column.label === 'string') {
@@ -656,7 +656,7 @@ var TableBodyRow = function (_a) {
656
656
  }
657
657
  else {
658
658
  if ((_c = column.head) === null || _c === void 0 ? void 0 : _c.onRender) {
659
- return (_d = column.head) === null || _d === void 0 ? void 0 : _d.onRender();
659
+ return (_d = column.head) === null || _d === void 0 ? void 0 : _d.onRender(items);
660
660
  }
661
661
  else {
662
662
  if (typeof column.label === 'string') {
@@ -667,7 +667,7 @@ var TableBodyRow = function (_a) {
667
667
  }
668
668
  }
669
669
  }
670
- }, [checkDisabled, checked, column, onCheckChange]);
670
+ }, [checkDisabled, checked, column, items, onCheckChange]);
671
671
  /********************************************************************************************************************
672
672
  * Render
673
673
  * ******************************************************************************************************************/
@@ -677,7 +677,7 @@ var TableTopHead = function (_a) {
677
677
  /********************************************************************************************************************
678
678
  * Use
679
679
  * ******************************************************************************************************************/
680
- var columns = _a.columns, rows = _a.rows, caption = _a.caption, defaultAlign = _a.defaultAlign, onCheckChange = _a.onCheckChange;
680
+ var columns = _a.columns, items = _a.items, rows = _a.rows, caption = _a.caption, defaultAlign = _a.defaultAlign, onCheckChange = _a.onCheckChange;
681
681
  var theme = material.useTheme();
682
682
  /********************************************************************************************************************
683
683
  * Ref
@@ -722,8 +722,8 @@ var TableTopHead = function (_a) {
722
722
  }, [columns, theme.palette.divider]);
723
723
  var columnRow = React.useMemo(function () {
724
724
  var top = (captionHeight || 0) + (row1Height || 0) + (row2Height || 0) + (row3Height || 0);
725
- return (React.createElement(material.TableRow, null, columns.map(function (column, idx) { return (React.createElement(TableHeadCell, { key: idx, column: column, defaultAlign: defaultAlign, top: top, onCheckChange: onCheckChange })); })));
726
- }, [captionHeight, columns, defaultAlign, onCheckChange, row1Height, row2Height, row3Height]);
725
+ return (React.createElement(material.TableRow, null, columns.map(function (column, idx) { return (React.createElement(TableHeadCell, { key: idx, column: column, items: items, defaultAlign: defaultAlign, top: top, onCheckChange: onCheckChange })); })));
726
+ }, [captionHeight, columns, defaultAlign, items, onCheckChange, row1Height, row2Height, row3Height]);
727
727
  /********************************************************************************************************************
728
728
  * Variable
729
729
  * ******************************************************************************************************************/
@@ -1275,7 +1275,7 @@ var Table = React.forwardRef(function (_a, ref) {
1275
1275
  if (fullHeight) {
1276
1276
  pagingStyle.position = 'sticky';
1277
1277
  }
1278
- var tableTopHead = finalColumns && (React.createElement(TableTopHead, { caption: caption, rows: topHeadRows, columns: finalColumns, defaultAlign: defaultAlign, onCheckChange: handleHeadCheckChange }));
1278
+ var tableTopHead = finalColumns && (React.createElement(TableTopHead, { caption: caption, rows: topHeadRows, columns: finalColumns, items: items, defaultAlign: defaultAlign, onCheckChange: handleHeadCheckChange }));
1279
1279
  var tableBody = React.useMemo(function () {
1280
1280
  return finalColumns && (React.createElement(material.TableBody, null, sortableItems ? (sortableItems.length > 0 ? (React.createElement(sortable.SortableContext, { items: sortableItems, strategy: sortable.verticalListSortingStrategy }, sortableItems.map(function (item, idx) { return (React.createElement(TableBodyRow, { key: item.id, className: classNames(!!showOddColor && 'odd-color', !!showEvenColor && 'even-color', onGetBodyRowClassName ? onGetBodyRowClassName(item, idx) : undefined), style: onGetBodyRowStyle ? onGetBodyRowStyle(item, idx) : undefined, sx: onGetBodyRowSx ? onGetBodyRowSx(item, idx) : undefined, onGetColumnClassName: onGetBodyColumnClassName, onGetColumnStyle: onGetBodyColumnStyle, onGetColumnSx: onGetBodyColumnSx, hover: true, id: item.id, index: idx, defaultAlign: defaultAlign, defaultEllipsis: defaultEllipsis, sortable: sortable$1, columns: finalColumns, item: item, onClick: onClick, onCheckChange: handleBodyCheckChange })); }))) : (React.createElement(StyledBodyRow$1, null,
1281
1281
  React.createElement(material.TableCell, { colSpan: finalColumns.length, style: { flex: 1 } }, noData ? (noData) : (React.createElement(StyledNoDataDiv, null,
@@ -1304,8 +1304,8 @@ var Table = React.forwardRef(function (_a, ref) {
1304
1304
  return finalColumns &&
1305
1305
  !isNoData &&
1306
1306
  footer && (React.createElement(material.TableFooter, null,
1307
- React.createElement(material.TableRow, null, finalColumns.map(function (column, idx) { return (React.createElement(TableFooterCell, { key: idx, column: column, defaultAlign: defaultAlign })); }))));
1308
- }, [defaultAlign, finalColumns, footer, isNoData]);
1307
+ React.createElement(material.TableRow, null, finalColumns.map(function (column, idx) { return (React.createElement(TableFooterCell, { key: idx, column: column, items: items, defaultAlign: defaultAlign })); }))));
1308
+ }, [defaultAlign, finalColumns, footer, isNoData, items]);
1309
1309
  /********************************************************************************************************************
1310
1310
  * Render
1311
1311
  * ******************************************************************************************************************/
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@pdg/react-table",
3
3
  "title": "React Table",
4
- "version": "1.0.123",
4
+ "version": "1.0.124",
5
5
  "description": "React Table",
6
6
  "type": "module",
7
7
  "types": "dist/index.d.ts",