@ackplus/react-tanstack-data-table 1.1.6 → 1.1.8

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 (16) hide show
  1. package/dist/lib/components/headers/table-header.d.ts +0 -1
  2. package/dist/lib/components/headers/table-header.d.ts.map +1 -1
  3. package/dist/lib/components/headers/table-header.js +6 -2
  4. package/dist/lib/components/rows/data-table-row.js +1 -1
  5. package/dist/lib/components/rows/loading-rows.d.ts.map +1 -1
  6. package/dist/lib/components/rows/loading-rows.js +7 -3
  7. package/dist/lib/data-table.d.ts.map +1 -1
  8. package/dist/lib/data-table.js +21 -15
  9. package/dist/lib/utils/styling-helpers.d.ts +6 -6
  10. package/dist/lib/utils/styling-helpers.js +2 -2
  11. package/package.json +1 -1
  12. package/src/lib/components/headers/table-header.tsx +5 -3
  13. package/src/lib/components/rows/data-table-row.tsx +1 -1
  14. package/src/lib/components/rows/loading-rows.tsx +5 -1
  15. package/src/lib/data-table.tsx +32 -17
  16. package/src/lib/utils/styling-helpers.ts +2 -2
package/dist/lib/components/headers/table-header.d.ts CHANGED
@@ -13,7 +13,6 @@ export interface TableHeaderProps extends TableHeadProps {
13
13
  draggable?: boolean;
14
14
  enableColumnResizing?: boolean;
15
15
  enableStickyHeader?: boolean;
16
- fitToScreen?: boolean;
17
16
  onColumnReorder?: (draggedColumnId: string, targetColumnId: string) => void;
18
17
  headerRowProps?: TableRowProps;
19
18
  headerCellProps?: TableCellProps;
package/dist/lib/components/headers/table-header.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"table-header.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/headers/table-header.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAiD,cAAc,EAAE,aAAa,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAQtI,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACpD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,CAAC,eAAe,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,KAAK,IAAI,CAAC;IAE5E,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,eAAe,CAAC,EAAE,cAAc,CAAC;IACjC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAChC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAAE,KAAK,EAAE,gBAAgB,GAAG,YAAY,CAuIpE"}
1
+ {"version":3,"file":"table-header.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/headers/table-header.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAiD,cAAc,EAAE,aAAa,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAQtI,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACpD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,eAAe,CAAC,EAAE,CAAC,eAAe,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,KAAK,IAAI,CAAC;IAE5E,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,eAAe,CAAC,EAAE,cAAc,CAAC;IACjC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAChC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAAE,KAAK,EAAE,gBAAgB,GAAG,YAAY,CA0IpE"}
package/dist/lib/components/headers/table-header.js CHANGED
@@ -24,7 +24,7 @@ const slot_helpers_1 = require("../../utils/slot-helpers");
24
24
  * Renders table headers with sorting, dragging, and resizing capabilities
25
25
  */
26
26
  function TableHeader(props) {
27
- const { draggable = false, enableColumnResizing = false, enableStickyHeader = false, fitToScreen = true, onColumnReorder, headerRowProps, headerCellProps, containerSx, resizeHandleSx, slots, slotProps, ...otherProps } = props;
27
+ const { draggable = false, enableColumnResizing = false, enableStickyHeader = false, onColumnReorder, headerRowProps, headerCellProps, containerSx, resizeHandleSx, slots, slotProps, ...otherProps } = props;
28
28
  const theme = (0, material_1.useTheme)();
29
29
  const { table } = (0, data_table_context_1.useDataTableContext)();
30
30
  // Extract slot-specific props with enhanced merging
@@ -47,12 +47,16 @@ function TableHeader(props) {
47
47
  const alignment = (0, utils_1.getColumnAlignment)(header.column.columnDef);
48
48
  const enableSorting = header.column.getCanSort();
49
49
  const wrapText = (_a = header.column.columnDef.wrapText) !== null && _a !== void 0 ? _a : false;
50
+ const minSize = header.column.columnDef.minSize;
51
+ const maxSize = header.column.columnDef.maxSize;
50
52
  const canResize = enableColumnResizing && header.column.getCanResize();
51
53
  const mergedHeaderCellProps = (0, slot_helpers_1.mergeSlotProps)({
52
54
  align: alignment,
53
55
  sx: {
54
56
  ...(0, utils_1.getPinnedColumnStyle)({
55
- width: fitToScreen ? 'auto' : header.getSize(),
57
+ width: header.getSize(),
58
+ minWidth: minSize !== undefined ? minSize : undefined,
59
+ maxWidth: maxSize !== undefined ? maxSize : undefined,
56
60
  isPinned,
57
61
  pinnedPosition,
58
62
  isLastLeftPinnedColumn: isPinned === 'left' && header.column.getIsLastColumn('left'),
package/dist/lib/components/rows/data-table-row.js CHANGED
@@ -97,7 +97,7 @@ function DataTableRow(props) {
97
97
  align: alignment,
98
98
  sx: {
99
99
  ...(0, utils_1.getPinnedColumnStyle)({
100
- width: cell.column.getSize() || 'auto',
100
+ width: cell.column.getSize(),
101
101
  minWidth: minSize !== undefined ? minSize : undefined,
102
102
  maxWidth: maxSize !== undefined ? maxSize : undefined,
103
103
  isPinned,
package/dist/lib/components/rows/loading-rows.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"loading-rows.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/rows/loading-rows.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAiC,aAAa,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAMtG,MAAM,WAAW,gBAAgB;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAChC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,YAAY,CA4IjE"}
1
+ {"version":3,"file":"loading-rows.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/rows/loading-rows.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAiC,aAAa,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAMtG,MAAM,WAAW,gBAAgB;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAChC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,YAAY,CAgJjE"}
package/dist/lib/components/rows/loading-rows.js CHANGED
@@ -24,12 +24,14 @@ function LoadingRows(props) {
24
24
  sx: containerSx,
25
25
  }, rowSlotProps, rowProps || {});
26
26
  return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: Array.from({ length: rowCount }, (_, rowIndex) => ((0, jsx_runtime_1.jsx)(TableRowSlot, { ...mergedRowProps, children: visibleColumns.map((column, colIndex) => {
27
- var _a;
27
+ var _a, _b, _c;
28
28
  const isPinned = column.getIsPinned();
29
29
  const pinnedPosition = isPinned ? column.getStart('left') : undefined;
30
30
  const pinnedRightPosition = isPinned === 'right' ? column.getAfter('right') : undefined;
31
+ const minSize = (_a = column.columnDef) === null || _a === void 0 ? void 0 : _a.minSize;
32
+ const maxSize = (_b = column.columnDef) === null || _b === void 0 ? void 0 : _b.maxSize;
31
33
  // Determine skeleton type based on column meta or content
32
- const columnMeta = (_a = column.columnDef) === null || _a === void 0 ? void 0 : _a.meta;
34
+ const columnMeta = (_c = column.columnDef) === null || _c === void 0 ? void 0 : _c.meta;
33
35
  const isDateColumn = (columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.type) === 'date';
34
36
  const isBooleanColumn = (columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.type) === 'boolean';
35
37
  const isNumberColumn = (columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.type) === 'number';
@@ -37,7 +39,9 @@ function LoadingRows(props) {
37
39
  const mergedCellProps = (0, slot_helpers_1.mergeSlotProps)({
38
40
  sx: {
39
41
  ...(0, utils_1.getPinnedColumnStyle)({
40
- width: column.getSize() || 'auto',
42
+ width: column.getSize(),
43
+ minWidth: minSize !== undefined ? minSize : undefined,
44
+ maxWidth: maxSize !== undefined ? maxSize : undefined,
41
45
  isPinned,
42
46
  pinnedPosition,
43
47
  pinnedRightPosition,
package/dist/lib/data-table.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../src/lib/data-table.tsx"],"names":[],"mappings":"AA6EA;;GAEG;AACH,eAAO,MAAM,SAAS,KA2yDpB,CAAC"}
1
+ {"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../src/lib/data-table.tsx"],"names":[],"mappings":"AA8EA;;GAEG;AACH,eAAO,MAAM,SAAS,KAyzDpB,CAAC"}
package/dist/lib/data-table.js CHANGED
@@ -113,7 +113,7 @@ enableGlobalFilter = true, enableColumnFilter = false, filterMode = 'client',
113
113
  // Sorting props
114
114
  enableSorting = true, sortingMode = 'client', onSortingChange, exportFilename = 'export', onExportProgress, onExportComplete, onExportError, onServerExport, onExportCancel,
115
115
  // Styling props
116
- enableHover = true, enableStripes = false, tableProps = {}, fitToScreen = false, tableSize: initialTableSize = 'medium',
116
+ enableHover = true, enableStripes = false, tableProps = {}, fitToScreen = true, tableSize: initialTableSize = 'medium',
117
117
  // Sticky header/footer props
118
118
  enableStickyHeaderOrFooter = false, maxHeight = '400px',
119
119
  // Virtualization props
@@ -133,6 +133,7 @@ logging, }, ref) {
133
133
  const isServerPagination = paginationMode === 'server' || isServerMode;
134
134
  const isServerFiltering = filterMode === 'server' || isServerMode;
135
135
  const isServerSorting = sortingMode === 'server' || isServerMode;
136
+ const theme = (0, material_1.useTheme)();
136
137
  const logger = (0, react_1.useMemo)(() => (0, utils_1.createLogger)('DataTable', logging), [logging]);
137
138
  (0, react_1.useEffect)(() => {
138
139
  if (logger.isLevelEnabled('info')) {
@@ -611,6 +612,7 @@ logging, }, ref) {
611
612
  // Column resizing
612
613
  enableColumnResizing: enableColumnResizing,
613
614
  columnResizeMode: columnResizeMode,
615
+ columnResizeDirection: theme.direction,
614
616
  // Column pinning
615
617
  enableColumnPinning: enableColumnPinning,
616
618
  // Expanding
@@ -626,19 +628,20 @@ logging, }, ref) {
626
628
  debugAll: false, // Disabled for production
627
629
  });
628
630
  // Compute width after table is created so column resizing is safe and reflects changes
629
- const tableWidth = (0, react_1.useMemo)(() => {
630
- if (fitToScreen) {
631
- return '100%';
632
- }
633
- if (enableColumnResizing) {
634
- return table.getCenterTotalSize();
635
- }
636
- return '100%';
637
- }, [fitToScreen, enableColumnResizing, table]);
638
- const tableStyle = (0, react_1.useMemo)(() => ({
631
+ const allLeafColumns = table.getAllLeafColumns();
632
+ const visibleLeafColumns = table.getVisibleLeafColumns();
633
+ const hasExplicitSizing = allLeafColumns.some((column) => {
634
+ const { size, minSize, maxSize } = column.columnDef;
635
+ return size !== undefined || minSize !== undefined || maxSize !== undefined;
636
+ });
637
+ const useFixedLayout = fitToScreen || enableColumnResizing || hasExplicitSizing;
638
+ const tableTotalSize = table.getTotalSize();
639
+ const tableWidth = fitToScreen ? '100%' : (useFixedLayout ? tableTotalSize : '100%');
640
+ const tableStyle = {
639
641
  width: tableWidth,
640
- minWidth: '100%',
641
- }), [tableWidth]);
642
+ minWidth: fitToScreen ? tableTotalSize : undefined,
643
+ tableLayout: useFixedLayout ? 'fixed' : 'auto',
644
+ };
642
645
  // -------------------------------
643
646
  // Virtualization and row memo
644
647
  // -------------------------------
@@ -1557,9 +1560,12 @@ logging, }, ref) {
1557
1560
  ...tableContainerSlotProps === null || tableContainerSlotProps === void 0 ? void 0 : tableContainerSlotProps.sx,
1558
1561
  }, ...tableContainerSlotProps, children: (0, jsx_runtime_1.jsxs)(TableComponent, { size: tableSize, stickyHeader: enableStickyHeaderOrFooter, style: {
1559
1562
  ...tableStyle,
1560
- tableLayout: fitToScreen ? 'fixed' : 'auto',
1561
1563
  ...tableProps === null || tableProps === void 0 ? void 0 : tableProps.style,
1562
- }, ...(0, slot_helpers_1.mergeSlotProps)(tableProps || {}, tableComponentSlotProps), children: [(0, jsx_runtime_1.jsx)(headers_1.TableHeader, { draggable: enableColumnDragging, enableColumnResizing: enableColumnResizing, enableStickyHeader: enableStickyHeaderOrFooter, fitToScreen: fitToScreen, onColumnReorder: handleColumnReorder, slots: slots, slotProps: slotProps }), (0, jsx_runtime_1.jsx)(BodyComponent, { ...bodySlotProps, children: renderTableRows() })] }) }), enablePagination ? ((0, jsx_runtime_1.jsx)(FooterComponent, { sx: {
1564
+ }, ...(0, slot_helpers_1.mergeSlotProps)(tableProps || {}, tableComponentSlotProps), children: [useFixedLayout ? ((0, jsx_runtime_1.jsx)("colgroup", { children: visibleLeafColumns.map((column) => ((0, jsx_runtime_1.jsx)("col", { style: {
1565
+ width: column.getSize(),
1566
+ minWidth: column.columnDef.minSize,
1567
+ maxWidth: column.columnDef.maxSize,
1568
+ } }, column.id))) })) : null, (0, jsx_runtime_1.jsx)(headers_1.TableHeader, { draggable: enableColumnDragging, enableColumnResizing: enableColumnResizing, enableStickyHeader: enableStickyHeaderOrFooter, onColumnReorder: handleColumnReorder, slots: slots, slotProps: slotProps }), (0, jsx_runtime_1.jsx)(BodyComponent, { ...bodySlotProps, children: renderTableRows() })] }) }), enablePagination ? ((0, jsx_runtime_1.jsx)(FooterComponent, { sx: {
1563
1569
  ...(enableStickyHeaderOrFooter && {
1564
1570
  position: 'sticky',
1565
1571
  bottom: 0,
package/dist/lib/utils/styling-helpers.d.ts CHANGED
@@ -14,10 +14,10 @@ export declare function getPinnedColumnStyle(options: PinnedColumnStyleOptions):
14
14
  zIndex?: number;
15
15
  whiteSpace: "normal";
16
16
  wordBreak: "break-word";
17
- overflow: "visible";
17
+ overflow: "hidden";
18
18
  textOverflow?: undefined;
19
19
  boxSizing: string;
20
- maxWidth: string | number;
20
+ maxWidth: number;
21
21
  minWidth: number;
22
22
  width: string | number;
23
23
  } | {
@@ -28,10 +28,10 @@ export declare function getPinnedColumnStyle(options: PinnedColumnStyleOptions):
28
28
  zIndex?: number;
29
29
  whiteSpace: "normal";
30
30
  wordBreak: "break-word";
31
- overflow: "visible";
31
+ overflow: "hidden";
32
32
  textOverflow?: undefined;
33
33
  boxSizing: string;
34
- maxWidth: string | number;
34
+ maxWidth: number;
35
35
  minWidth: number;
36
36
  width: string | number;
37
37
  } | {
@@ -46,7 +46,7 @@ export declare function getPinnedColumnStyle(options: PinnedColumnStyleOptions):
46
46
  textOverflow: "ellipsis";
47
47
  wordBreak?: undefined;
48
48
  boxSizing: string;
49
- maxWidth: string | number;
49
+ maxWidth: number;
50
50
  minWidth: number;
51
51
  width: string | number;
52
52
  } | {
@@ -60,7 +60,7 @@ export declare function getPinnedColumnStyle(options: PinnedColumnStyleOptions):
60
60
  textOverflow: "ellipsis";
61
61
  wordBreak?: undefined;
62
62
  boxSizing: string;
63
- maxWidth: string | number;
63
+ maxWidth: number;
64
64
  minWidth: number;
65
65
  width: string | number;
66
66
  };
package/dist/lib/utils/styling-helpers.js CHANGED
@@ -30,7 +30,7 @@ function getPinnedColumnStyle(options) {
30
30
  ? {
31
31
  whiteSpace: 'normal',
32
32
  wordBreak: 'break-word',
33
- overflow: 'visible',
33
+ overflow: 'hidden',
34
34
  }
35
35
  : {
36
36
  overflow: 'hidden',
@@ -41,7 +41,7 @@ function getPinnedColumnStyle(options) {
41
41
  // Width constraints - more strict for narrow columns
42
42
  width,
43
43
  ...(minWidth !== undefined && { minWidth }),
44
- ...(maxWidth !== undefined ? { maxWidth } : { maxWidth: width }),
44
+ ...(maxWidth !== undefined && { maxWidth }),
45
45
  boxSizing: 'border-box',
46
46
  ...textWrappingStyles,
47
47
  // Position handling
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ackplus/react-tanstack-data-table",
3
3
  "type": "commonjs",
4
- "version": "1.1.6",
4
+ "version": "1.1.8",
5
5
  "description": "A powerful React data table component built with MUI and TanStack Table",
6
6
  "keywords": [
7
7
  "react",
package/src/lib/components/headers/table-header.tsx CHANGED
@@ -20,7 +20,6 @@ export interface TableHeaderProps extends TableHeadProps {
20
20
  draggable?: boolean;
21
21
  enableColumnResizing?: boolean;
22
22
  enableStickyHeader?: boolean;
23
- fitToScreen?: boolean;
24
23
  onColumnReorder?: (draggedColumnId: string, targetColumnId: string) => void;
25
24
  // Enhanced customization props
26
25
  headerRowProps?: TableRowProps;
@@ -40,7 +39,6 @@ export function TableHeader<T>(props: TableHeaderProps): ReactElement {
40
39
  draggable = false,
41
40
  enableColumnResizing = false,
42
41
  enableStickyHeader = false,
43
- fitToScreen = true,
44
42
  onColumnReorder,
45
43
  headerRowProps,
46
44
  headerCellProps,
@@ -85,6 +83,8 @@ export function TableHeader<T>(props: TableHeaderProps): ReactElement {
85
83
  const alignment = getColumnAlignment(header.column.columnDef);
86
84
  const enableSorting = header.column.getCanSort();
87
85
  const wrapText = header.column.columnDef.wrapText ?? false;
86
+ const minSize = header.column.columnDef.minSize;
87
+ const maxSize = header.column.columnDef.maxSize;
88
88
  const canResize = enableColumnResizing && header.column.getCanResize();
89
89
 
90
90
  const mergedHeaderCellProps = mergeSlotProps(
@@ -92,7 +92,9 @@ export function TableHeader<T>(props: TableHeaderProps): ReactElement {
92
92
  align: alignment,
93
93
  sx: {
94
94
  ...getPinnedColumnStyle({
95
- width: fitToScreen ? 'auto' : header.getSize(),
95
+ width: header.getSize(),
96
+ minWidth: minSize !== undefined ? minSize : undefined,
97
+ maxWidth: maxSize !== undefined ? maxSize : undefined,
96
98
  isPinned,
97
99
  pinnedPosition,
98
100
  isLastLeftPinnedColumn: isPinned === 'left' && header.column.getIsLastColumn('left'),
package/src/lib/components/rows/data-table-row.tsx CHANGED
@@ -158,7 +158,7 @@ export function DataTableRow<T>(props: DataTableRowProps<T>): ReactElement {
158
158
  align: alignment,
159
159
  sx: {
160
160
  ...getPinnedColumnStyle({
161
- width: cell.column.getSize() || 'auto',
161
+ width: cell.column.getSize(),
162
162
  minWidth: minSize !== undefined ? minSize : undefined,
163
163
  maxWidth: maxSize !== undefined ? maxSize : undefined,
164
164
  isPinned,
package/src/lib/components/rows/loading-rows.tsx CHANGED
@@ -58,6 +58,8 @@ export function LoadingRows(props: LoadingRowsProps): ReactElement {
58
58
  const isPinned = column.getIsPinned();
59
59
  const pinnedPosition = isPinned ? column.getStart('left') : undefined;
60
60
  const pinnedRightPosition = isPinned === 'right' ? column.getAfter('right') : undefined;
61
+ const minSize = column.columnDef?.minSize;
62
+ const maxSize = column.columnDef?.maxSize;
61
63
 
62
64
  // Determine skeleton type based on column meta or content
63
65
  const columnMeta = column.columnDef?.meta;
@@ -70,7 +72,9 @@ export function LoadingRows(props: LoadingRowsProps): ReactElement {
70
72
  {
71
73
  sx: {
72
74
  ...getPinnedColumnStyle({
73
- width: column.getSize() || 'auto',
75
+ width: column.getSize(),
76
+ minWidth: minSize !== undefined ? minSize : undefined,
77
+ maxWidth: maxSize !== undefined ? maxSize : undefined,
74
78
  isPinned,
75
79
  pinnedPosition,
76
80
  pinnedRightPosition,
package/src/lib/data-table.tsx CHANGED
@@ -12,6 +12,7 @@ import {
12
12
  TableBody,
13
13
  Box,
14
14
  Paper,
15
+ useTheme,
15
16
  } from '@mui/material';
16
17
  import {
17
18
  getCoreRowModel,
@@ -154,7 +155,7 @@ export const DataTable = forwardRef<DataTableApi<any>, DataTableProps<any>>(func
154
155
  enableHover = true,
155
156
  enableStripes = false,
156
157
  tableProps = {},
157
- fitToScreen = false,
158
+ fitToScreen = true,
158
159
  tableSize: initialTableSize = 'medium',
159
160
 
160
161
  // Sticky header/footer props
@@ -194,6 +195,7 @@ export const DataTable = forwardRef<DataTableApi<any>, DataTableProps<any>>(func
194
195
  const isServerFiltering = filterMode === 'server' || isServerMode;
195
196
  const isServerSorting = sortingMode === 'server' || isServerMode;
196
197
 
198
+ const theme = useTheme();
197
199
  const logger = useMemo(() => createLogger('DataTable', logging), [logging]);
198
200
 
199
201
  useEffect(() => {
@@ -720,6 +722,7 @@ export const DataTable = forwardRef<DataTableApi<any>, DataTableProps<any>>(func
720
722
  // Column resizing
721
723
  enableColumnResizing: enableColumnResizing,
722
724
  columnResizeMode: columnResizeMode,
725
+ columnResizeDirection: theme.direction,
723
726
  // Column pinning
724
727
  enableColumnPinning: enableColumnPinning,
725
728
  // Expanding
@@ -736,20 +739,20 @@ export const DataTable = forwardRef<DataTableApi<any>, DataTableProps<any>>(func
736
739
  });
737
740
 
738
741
  // Compute width after table is created so column resizing is safe and reflects changes
739
- const tableWidth = useMemo(() => {
740
- if (fitToScreen) {
741
- return '100%';
742
- }
743
- if (enableColumnResizing) {
744
- return table.getCenterTotalSize();
745
- }
746
- return '100%';
747
- }, [fitToScreen, enableColumnResizing, table]);
748
-
749
- const tableStyle = useMemo(() => ({
742
+ const allLeafColumns = table.getAllLeafColumns();
743
+ const visibleLeafColumns = table.getVisibleLeafColumns();
744
+ const hasExplicitSizing = allLeafColumns.some((column) => {
745
+ const { size, minSize, maxSize } = column.columnDef;
746
+ return size !== undefined || minSize !== undefined || maxSize !== undefined;
747
+ });
748
+ const useFixedLayout = fitToScreen || enableColumnResizing || hasExplicitSizing;
749
+ const tableTotalSize = table.getTotalSize();
750
+ const tableWidth = fitToScreen ? '100%' : (useFixedLayout ? tableTotalSize : '100%');
751
+ const tableStyle = {
750
752
  width: tableWidth,
751
- minWidth: '100%',
752
- }), [tableWidth]);
753
+ minWidth: fitToScreen ? tableTotalSize : undefined,
754
+ tableLayout: useFixedLayout ? 'fixed' : 'auto',
755
+ };
753
756
 
754
757
 
755
758
  // -------------------------------
@@ -1861,17 +1864,29 @@ export const DataTable = forwardRef<DataTableApi<any>, DataTableProps<any>>(func
1861
1864
  stickyHeader={enableStickyHeaderOrFooter}
1862
1865
  style={{
1863
1866
  ...tableStyle,
1864
- tableLayout: fitToScreen ? 'fixed' : 'auto',
1865
1867
  ...tableProps?.style,
1866
1868
  }}
1867
1869
  {...mergeSlotProps(tableProps || {}, tableComponentSlotProps)}
1868
1870
  >
1871
+ {useFixedLayout ? (
1872
+ <colgroup>
1873
+ {visibleLeafColumns.map((column) => (
1874
+ <col
1875
+ key={column.id}
1876
+ style={{
1877
+ width: column.getSize(),
1878
+ minWidth: column.columnDef.minSize,
1879
+ maxWidth: column.columnDef.maxSize,
1880
+ }}
1881
+ />
1882
+ ))}
1883
+ </colgroup>
1884
+ ) : null}
1869
1885
  {/* Table Headers */}
1870
1886
  <TableHeader
1871
1887
  draggable={enableColumnDragging}
1872
1888
  enableColumnResizing={enableColumnResizing}
1873
1889
  enableStickyHeader={enableStickyHeaderOrFooter}
1874
- fitToScreen={fitToScreen}
1875
1890
  onColumnReorder={handleColumnReorder}
1876
1891
  slots={slots}
1877
1892
  slotProps={slotProps}
@@ -1913,4 +1928,4 @@ export const DataTable = forwardRef<DataTableApi<any>, DataTableProps<any>>(func
1913
1928
  </RootComponent>
1914
1929
  </DataTableProvider>
1915
1930
  );
1916
- });
1931
+ });
package/src/lib/utils/styling-helpers.ts CHANGED
@@ -43,7 +43,7 @@ export function getPinnedColumnStyle(options: PinnedColumnStyleOptions) {
43
43
  ? {
44
44
  whiteSpace: 'normal' as const,
45
45
  wordBreak: 'break-word' as const,
46
- overflow: 'visible' as const,
46
+ overflow: 'hidden' as const,
47
47
  }
48
48
  : {
49
49
  overflow: 'hidden' as const,
@@ -55,7 +55,7 @@ export function getPinnedColumnStyle(options: PinnedColumnStyleOptions) {
55
55
  // Width constraints - more strict for narrow columns
56
56
  width,
57
57
  ...(minWidth !== undefined && { minWidth }),
58
- ...(maxWidth !== undefined ? { maxWidth } : { maxWidth: width }),
58
+ ...(maxWidth !== undefined && { maxWidth }),
59
59
  boxSizing: 'border-box',
60
60
  ...textWrappingStyles,
61
61
  // Position handling