material-react-table 0.13.0 → 0.13.3

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.
@@ -158,28 +158,33 @@ var MRT_ExpandAllButton = function MRT_ExpandAllButton(_ref) {
158
158
  _instance$options = instance.options,
159
159
  KeyboardDoubleArrowDownIcon = _instance$options.icons.KeyboardDoubleArrowDownIcon,
160
160
  localization = _instance$options.localization,
161
+ muiExpandAllButtonProps = _instance$options.muiExpandAllButtonProps,
161
162
  renderDetailPanel = _instance$options.renderDetailPanel,
162
163
  toggleAllRowsExpanded = instance.toggleAllRowsExpanded;
163
164
 
164
165
  var _getState = getState(),
165
166
  density = _getState.density;
166
167
 
168
+ var iconButtonProps = muiExpandAllButtonProps instanceof Function ? muiExpandAllButtonProps({
169
+ instance: instance
170
+ }) : muiExpandAllButtonProps;
167
171
  return React__default.createElement(material.Tooltip, {
168
172
  arrow: true,
169
173
  enterDelay: 1000,
170
174
  enterNextDelay: 1000,
171
175
  title: localization.expandAll
172
- }, React__default.createElement(material.IconButton, {
176
+ }, React__default.createElement(material.IconButton, Object.assign({
173
177
  "aria-label": localization.expandAll,
174
178
  disabled: !getCanSomeRowsExpand() && !renderDetailPanel,
175
179
  onClick: function onClick() {
176
180
  return toggleAllRowsExpanded(!getIsAllRowsExpanded());
177
- },
178
- sx: {
181
+ }
182
+ }, iconButtonProps, {
183
+ sx: _extends({
179
184
  height: density === 'compact' ? '1.75rem' : '2.25rem',
180
185
  width: density === 'compact' ? '1.75rem' : '2.25rem'
181
- }
182
- }, React__default.createElement(KeyboardDoubleArrowDownIcon, {
186
+ }, iconButtonProps == null ? void 0 : iconButtonProps.sx)
187
+ }), React__default.createElement(KeyboardDoubleArrowDownIcon, {
183
188
  style: {
184
189
  transform: "rotate(" + (getIsAllRowsExpanded() ? -180 : getIsSomeRowsExpanded() ? -90 : 0) + "deg)",
185
190
  transition: 'transform 0.2s'
@@ -194,12 +199,18 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
194
199
  _instance$options = instance.options,
195
200
  ExpandMoreIcon = _instance$options.icons.ExpandMoreIcon,
196
201
  localization = _instance$options.localization,
202
+ muiExpandButtonProps = _instance$options.muiExpandButtonProps,
197
203
  onExpandChanged = _instance$options.onExpandChanged,
198
204
  renderDetailPanel = _instance$options.renderDetailPanel;
199
205
 
200
206
  var _getState = getState(),
201
207
  density = _getState.density;
202
208
 
209
+ var iconButtonProps = muiExpandButtonProps instanceof Function ? muiExpandButtonProps({
210
+ instance: instance,
211
+ row: row
212
+ }) : muiExpandButtonProps;
213
+
203
214
  var handleToggleExpand = function handleToggleExpand(event) {
204
215
  row.toggleExpanded();
205
216
  onExpandChanged == null ? void 0 : onExpandChanged({
@@ -214,15 +225,16 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
214
225
  enterDelay: 1000,
215
226
  enterNextDelay: 1000,
216
227
  title: localization.expand
217
- }, React__default.createElement(material.IconButton, {
228
+ }, React__default.createElement(material.IconButton, Object.assign({
218
229
  "aria-label": localization.expand,
219
230
  disabled: !row.getCanExpand() && !renderDetailPanel,
220
- onClick: handleToggleExpand,
221
- sx: {
231
+ onClick: handleToggleExpand
232
+ }, iconButtonProps, {
233
+ sx: _extends({
222
234
  height: density === 'compact' ? '1.75rem' : '2.25rem',
223
235
  width: density === 'compact' ? '1.75rem' : '2.25rem'
224
- }
225
- }, React__default.createElement(ExpandMoreIcon, {
236
+ }, iconButtonProps == null ? void 0 : iconButtonProps.sx)
237
+ }), React__default.createElement(ExpandMoreIcon, {
226
238
  style: {
227
239
  transform: "rotate(" + (!row.getCanExpand() && !renderDetailPanel ? -90 : row.getIsExpanded() ? -180 : 0) + "deg)",
228
240
  transition: 'transform 0.2s'
@@ -3400,6 +3412,17 @@ var reorderColumn = function reorderColumn(movingColumn, receivingColumn, column
3400
3412
  columnOrder.splice(columnOrder.indexOf(receivingColumn.id), 0, columnOrder.splice(columnOrder.indexOf(movingColumn.id), 1)[0]);
3401
3413
  setColumnOrder([].concat(columnOrder));
3402
3414
  };
3415
+ var getLeadingDisplayColumnIds = function getLeadingDisplayColumnIds(props) {
3416
+ return [(props.positionActionsColumn === 'first' && props.enableRowActions || props.enableEditing && props.editingMode === 'row') && 'mrt-row-actions', (props.enableExpanding || props.enableGrouping) && 'mrt-expand', props.enableRowSelection && 'mrt-select', props.enableRowNumbers && 'mrt-row-numbers'].filter(Boolean);
3417
+ };
3418
+ var getTrailingDisplayColumnIds = function getTrailingDisplayColumnIds(props) {
3419
+ return [(props.positionActionsColumn === 'last' && props.enableRowActions || props.enableEditing && props.editingMode === 'row') && 'mrt-row-actions'];
3420
+ };
3421
+ var getDefaultColumnOrderIds = function getDefaultColumnOrderIds(props) {
3422
+ return [].concat(getLeadingDisplayColumnIds(props), getAllLeafColumnDefs(props.columns).map(function (c) {
3423
+ return c.id;
3424
+ }), getTrailingDisplayColumnIds(props)).filter(Boolean);
3425
+ };
3403
3426
 
3404
3427
  var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
3405
3428
  var _column$columns2;
@@ -3585,7 +3608,7 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
3585
3608
  onClick: hideAllColumns
3586
3609
  }, localization.hideAll), !isSubMenu && enableColumnOrdering && React__default.createElement(material.Button, {
3587
3610
  onClick: function onClick() {
3588
- return instance.resetColumnOrder();
3611
+ return instance.setColumnOrder(getDefaultColumnOrderIds(instance.options));
3589
3612
  }
3590
3613
  }, localization.resetOrder), !isSubMenu && enablePinning && React__default.createElement(material.Button, {
3591
3614
  disabled: !getIsSomeColumnsPinned(),
@@ -4048,11 +4071,13 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
4048
4071
  selectAll = _ref.selectAll,
4049
4072
  instance = _ref.instance;
4050
4073
  var getRowModel = instance.getRowModel,
4074
+ getPaginationRowModel = instance.getPaginationRowModel,
4051
4075
  getSelectedRowModel = instance.getSelectedRowModel,
4052
4076
  getState = instance.getState,
4053
4077
  _instance$options = instance.options,
4054
4078
  localization = _instance$options.localization,
4055
4079
  muiSelectCheckboxProps = _instance$options.muiSelectCheckboxProps,
4080
+ muiSelectAllCheckboxProps = _instance$options.muiSelectAllCheckboxProps,
4056
4081
  onRowSelectionChanged = _instance$options.onRowSelectionChanged,
4057
4082
  onRowSelectAllChanged = _instance$options.onRowSelectAllChanged,
4058
4083
  selectAllMode = _instance$options.selectAllMode;
@@ -4070,7 +4095,7 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
4070
4095
 
4071
4096
  onRowSelectAllChanged == null ? void 0 : onRowSelectAllChanged({
4072
4097
  event: event,
4073
- selectedRows: event.target.checked ? getRowModel().flatRows : [],
4098
+ selectedRows: event.target.checked ? selectAllMode === 'all' ? getRowModel().flatRows : getPaginationRowModel().flatRows : [],
4074
4099
  instance: instance
4075
4100
  });
4076
4101
  } else if (row) {
@@ -4086,8 +4111,9 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
4086
4111
  }
4087
4112
  };
4088
4113
 
4089
- var checkboxProps = muiSelectCheckboxProps instanceof Function ? muiSelectCheckboxProps({
4090
- isSelectAll: !!selectAll,
4114
+ var checkboxProps = selectAll ? muiSelectAllCheckboxProps instanceof Function ? muiSelectAllCheckboxProps({
4115
+ instance: instance
4116
+ }) : muiSelectAllCheckboxProps : muiSelectCheckboxProps instanceof Function ? muiSelectCheckboxProps({
4091
4117
  row: row,
4092
4118
  instance: instance
4093
4119
  }) : muiSelectCheckboxProps;
@@ -5373,7 +5399,7 @@ var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons(_ref) {
5373
5399
  var instance = _ref.instance;
5374
5400
  var _instance$options = instance.options,
5375
5401
  enableColumnFilters = _instance$options.enableColumnFilters,
5376
- enableDensePaddingToggle = _instance$options.enableDensePaddingToggle,
5402
+ enableDensityToggle = _instance$options.enableDensityToggle,
5377
5403
  enableFilters = _instance$options.enableFilters,
5378
5404
  enableFullScreenToggle = _instance$options.enableFullScreenToggle,
5379
5405
  enableGlobalFilter = _instance$options.enableGlobalFilter,
@@ -5401,7 +5427,7 @@ var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons(_ref) {
5401
5427
  instance: instance
5402
5428
  }), enableHiding && React__default.createElement(MRT_ShowHideColumnsButton, {
5403
5429
  instance: instance
5404
- }), enableDensePaddingToggle && React__default.createElement(MRT_ToggleDensePaddingButton, {
5430
+ }), enableDensityToggle && React__default.createElement(MRT_ToggleDensePaddingButton, {
5405
5431
  instance: instance
5406
5432
  }), enableFullScreenToggle && React__default.createElement(MRT_FullScreenToggleButton, {
5407
5433
  instance: instance
@@ -5747,12 +5773,14 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
5747
5773
  onColumnFilterValueChangedDebounced == null ? void 0 : onColumnFilterValueChangedDebounced({
5748
5774
  column: column,
5749
5775
  event: event,
5750
- filterValue: event.target.value
5776
+ filterValue: event.target.value,
5777
+ instance: instance
5751
5778
  });
5752
5779
  columnDef.onColumnFilterValueChangedDebounced == null ? void 0 : columnDef.onColumnFilterValueChangedDebounced({
5753
5780
  column: column,
5754
5781
  event: event,
5755
- filterValue: event.target.value
5782
+ filterValue: event.target.value,
5783
+ instance: instance
5756
5784
  });
5757
5785
  }, 200), []);
5758
5786
 
@@ -5762,12 +5790,14 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
5762
5790
  onColumnFilterValueChanged == null ? void 0 : onColumnFilterValueChanged({
5763
5791
  column: column,
5764
5792
  event: event,
5765
- filterValue: event.target.value
5793
+ filterValue: event.target.value,
5794
+ instance: instance
5766
5795
  });
5767
5796
  columnDef.onColumnFilterValueChanged == null ? void 0 : columnDef.onColumnFilterValueChanged({
5768
5797
  column: column,
5769
5798
  event: event,
5770
- filterValue: event.target.value
5799
+ filterValue: event.target.value,
5800
+ instance: instance
5771
5801
  });
5772
5802
  };
5773
5803
 
@@ -7501,7 +7531,7 @@ var MRT_TablePaper = function MRT_TablePaper(_ref) {
7501
7531
  };
7502
7532
 
7503
7533
  var MRT_TableRoot = function MRT_TableRoot(props) {
7504
- var _initialState$current, _initialState$current2, _initialState$density, _initialState$isFullS, _initialState$showFil, _initialState$showGlo, _props$globalFilterFn, _props$state3, _props$state4, _props$onCurrentEditi, _props$onCurrentEditi2, _props$onCurrentFilte, _props$onCurrentGloba, _props$onDensityChang, _props$onIsFullScreen, _props$onShowFiltersC, _props$onShowGlobalFi;
7534
+ var _initialState$columnO, _initialState$current, _initialState$current2, _initialState$density, _initialState$isFullS, _initialState$showFil, _initialState$showGlo, _props$globalFilterFn, _props$state3, _props$state4, _props$onCurrentEditi, _props$onCurrentEditi2, _props$onCurrentFilte, _props$onCurrentGloba, _props$onDensityChang, _props$onIsFullScreen, _props$onShowFiltersC, _props$onShowGlobalFi;
7505
7535
 
7506
7536
  var _useState = React.useState(props.tableId),
7507
7537
  tableId = _useState[0],
@@ -7512,15 +7542,11 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
7512
7542
 
7513
7543
  return setIdPrefix((_props$tableId = props.tableId) != null ? _props$tableId : Math.random().toString(36).substring(2, 9));
7514
7544
  }, [props.tableId]);
7515
- var showActionColumn = props.enableRowActions || props.enableEditing && props.editingMode === 'row';
7516
- var showExpandColumn = props.enableExpanding || props.enableGrouping;
7517
7545
  var initialState = React.useMemo(function () {
7518
7546
  var _props$initialState, _initState$columnOrde;
7519
7547
 
7520
7548
  var initState = (_props$initialState = props.initialState) != null ? _props$initialState : {};
7521
- initState.columnOrder = ((_initState$columnOrde = initState == null ? void 0 : initState.columnOrder) != null ? _initState$columnOrde : props.enableColumnOrdering || props.enableGrouping) ? [showActionColumn && 'mrt-row-actions', showExpandColumn && 'mrt-expand', props.enableRowSelection && 'mrt-select', props.enableRowNumbers && 'mrt-row-numbers'].concat(getAllLeafColumnDefs(props.columns).map(function (c) {
7522
- return c.id;
7523
- })).filter(Boolean) : [];
7549
+ initState.columnOrder = (_initState$columnOrde = initState.columnOrder) != null ? _initState$columnOrde : getDefaultColumnOrderIds(props);
7524
7550
 
7525
7551
  if (!props.enablePersistentState || !props.tableId) {
7526
7552
  return initState;
@@ -7547,43 +7573,47 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
7547
7573
  return initState;
7548
7574
  }, []);
7549
7575
 
7550
- var _useState2 = React.useState((_initialState$current = initialState == null ? void 0 : initialState.currentEditingCell) != null ? _initialState$current : null),
7551
- currentEditingCell = _useState2[0],
7552
- setCurrentEditingCell = _useState2[1];
7576
+ var _useState2 = React.useState((_initialState$columnO = initialState.columnOrder) != null ? _initialState$columnO : []),
7577
+ columnOrder = _useState2[0],
7578
+ setColumnOrder = _useState2[1];
7553
7579
 
7554
- var _useState3 = React.useState((_initialState$current2 = initialState == null ? void 0 : initialState.currentEditingRow) != null ? _initialState$current2 : null),
7555
- currentEditingRow = _useState3[0],
7556
- setCurrentEditingRow = _useState3[1];
7580
+ var _useState3 = React.useState((_initialState$current = initialState == null ? void 0 : initialState.currentEditingCell) != null ? _initialState$current : null),
7581
+ currentEditingCell = _useState3[0],
7582
+ setCurrentEditingCell = _useState3[1];
7557
7583
 
7558
- var _useState4 = React.useState((_initialState$density = initialState == null ? void 0 : initialState.density) != null ? _initialState$density : 'comfortable'),
7559
- density = _useState4[0],
7560
- setDensity = _useState4[1];
7584
+ var _useState4 = React.useState((_initialState$current2 = initialState == null ? void 0 : initialState.currentEditingRow) != null ? _initialState$current2 : null),
7585
+ currentEditingRow = _useState4[0],
7586
+ setCurrentEditingRow = _useState4[1];
7561
7587
 
7562
- var _useState5 = React.useState((_initialState$isFullS = initialState == null ? void 0 : initialState.isFullScreen) != null ? _initialState$isFullS : false),
7563
- isFullScreen = _useState5[0],
7564
- setIsFullScreen = _useState5[1];
7588
+ var _useState5 = React.useState((_initialState$density = initialState == null ? void 0 : initialState.density) != null ? _initialState$density : 'comfortable'),
7589
+ density = _useState5[0],
7590
+ setDensity = _useState5[1];
7565
7591
 
7566
- var _useState6 = React.useState((_initialState$showFil = initialState == null ? void 0 : initialState.showFilters) != null ? _initialState$showFil : false),
7567
- showFilters = _useState6[0],
7568
- setShowFilters = _useState6[1];
7592
+ var _useState6 = React.useState((_initialState$isFullS = initialState == null ? void 0 : initialState.isFullScreen) != null ? _initialState$isFullS : false),
7593
+ isFullScreen = _useState6[0],
7594
+ setIsFullScreen = _useState6[1];
7569
7595
 
7570
- var _useState7 = React.useState((_initialState$showGlo = initialState == null ? void 0 : initialState.showGlobalFilter) != null ? _initialState$showGlo : false),
7571
- showGlobalFilter = _useState7[0],
7572
- setShowGlobalFilter = _useState7[1];
7596
+ var _useState7 = React.useState((_initialState$showFil = initialState == null ? void 0 : initialState.showFilters) != null ? _initialState$showFil : false),
7597
+ showFilters = _useState7[0],
7598
+ setShowFilters = _useState7[1];
7573
7599
 
7574
- var _useState8 = React.useState(function () {
7600
+ var _useState8 = React.useState((_initialState$showGlo = initialState == null ? void 0 : initialState.showGlobalFilter) != null ? _initialState$showGlo : false),
7601
+ showGlobalFilter = _useState8[0],
7602
+ setShowGlobalFilter = _useState8[1];
7603
+
7604
+ var _useState9 = React.useState(function () {
7575
7605
  return Object.assign.apply(Object, [{}].concat(getAllLeafColumnDefs(props.columns).map(function (c) {
7576
7606
  var _ref, _c$filterFn, _initialState$current3, _c$filterSelectOption, _ref2;
7577
7607
 
7578
7608
  return _ref2 = {}, _ref2[c.id] = (_ref = (_c$filterFn = c.filterFn) != null ? _c$filterFn : initialState == null ? void 0 : (_initialState$current3 = initialState.currentFilterFns) == null ? void 0 : _initialState$current3[c.id]) != null ? _ref : !!((_c$filterSelectOption = c.filterSelectOptions) != null && _c$filterSelectOption.length) ? 'equals' : 'fuzzy', _ref2;
7579
7609
  })));
7580
7610
  }),
7581
- currentFilterFns = _useState8[0],
7582
- setCurrentFilterFns = _useState8[1];
7611
+ currentFilterFns = _useState9[0],
7612
+ setCurrentFilterFns = _useState9[1];
7583
7613
 
7584
- var _useState9 = React.useState((_props$globalFilterFn = props.globalFilterFn) != null ? _props$globalFilterFn : 'fuzzy'),
7585
- currentGlobalFilterFn = _useState9[0],
7586
- setCurrentGlobalFilterFn = _useState9[1];
7614
+ var _useState10 = React.useState((_props$globalFilterFn = props.globalFilterFn) != null ? _props$globalFilterFn : 'fuzzy'),
7615
+ currentGlobalFilterFn = _useState10[0],
7616
+ setCurrentGlobalFilterFn = _useState10[1];
7587
7617
 
7588
7618
  var table = React.useMemo(function () {
7589
7619
  return (// @ts-ignore
@@ -7600,16 +7630,14 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
7600
7630
  getSubRows: function getSubRows(row) {
7601
7631
  return row == null ? void 0 : row.subRows;
7602
7632
  },
7603
- tableId: tableId,
7604
- initialState: initialState
7633
+ tableId: tableId
7605
7634
  })
7606
7635
  );
7607
7636
  }, []);
7608
-
7609
- var _useMemo = React.useMemo(function () {
7637
+ var displayColumns = React.useMemo(function () {
7610
7638
  var _props$localization, _props$localization2, _props$localization3, _props$localization5;
7611
7639
 
7612
- var leadingDisplayColumns = [showActionColumn && createDisplayColumn(table, {
7640
+ return [columnOrder.includes('mrt-row-actions') && createDisplayColumn(table, {
7613
7641
  Cell: function Cell(_ref3) {
7614
7642
  var cell = _ref3.cell;
7615
7643
  return React__default.createElement(MRT_ToggleRowActionMenuButton, {
@@ -7622,7 +7650,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
7622
7650
  muiTableBodyCellProps: props.muiTableBodyCellProps,
7623
7651
  muiTableHeadCellProps: props.muiTableHeadCellProps,
7624
7652
  size: 70
7625
- }), showExpandColumn && createDisplayColumn(table, {
7653
+ }), columnOrder.includes('mrt-expand') && createDisplayColumn(table, {
7626
7654
  Cell: function Cell(_ref4) {
7627
7655
  var cell = _ref4.cell;
7628
7656
  return React__default.createElement(MRT_ExpandButton, {
@@ -7640,7 +7668,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
7640
7668
  muiTableBodyCellProps: props.muiTableBodyCellProps,
7641
7669
  muiTableHeadCellProps: props.muiTableHeadCellProps,
7642
7670
  size: 50
7643
- }), props.enableRowSelection && createDisplayColumn(table, {
7671
+ }), columnOrder.includes('mrt-select') && createDisplayColumn(table, {
7644
7672
  Cell: function Cell(_ref5) {
7645
7673
  var cell = _ref5.cell;
7646
7674
  return React__default.createElement(MRT_SelectCheckbox, {
@@ -7659,7 +7687,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
7659
7687
  muiTableBodyCellProps: props.muiTableBodyCellProps,
7660
7688
  muiTableHeadCellProps: props.muiTableHeadCellProps,
7661
7689
  size: 50
7662
- }), props.enableRowNumbers && createDisplayColumn(table, {
7690
+ }), columnOrder.includes('mrt-row-numbers') && createDisplayColumn(table, {
7663
7691
  Cell: function Cell(_ref6) {
7664
7692
  var cell = _ref6.cell;
7665
7693
  return cell.row.index + 1;
@@ -7675,23 +7703,11 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
7675
7703
  muiTableHeadCellProps: props.muiTableHeadCellProps,
7676
7704
  size: 50
7677
7705
  })].filter(Boolean);
7678
- var trailingDisplayColumns = [];
7679
-
7680
- if (props.enableRowActions && props.positionActionsColumn === 'last') {
7681
- trailingDisplayColumns.push.apply(trailingDisplayColumns, leadingDisplayColumns.splice(leadingDisplayColumns.findIndex(function (col) {
7682
- return col.id === 'mrt-row-actions';
7683
- }), 1));
7684
- }
7685
-
7686
- return [leadingDisplayColumns, trailingDisplayColumns];
7687
- }, [props.editingMode, props.enableEditing, props.enableExpandAll, props.enableExpanding, props.enableGrouping, props.enableRowActions, props.enableRowNumbers, props.enableRowSelection, props.enableSelectAll, props.localization, props.muiTableBodyCellProps, props.muiTableHeadCellProps, props.positionActionsColumn, table]),
7688
- leadingDisplayColumns = _useMemo[0],
7689
- trailingDisplayColumns = _useMemo[1];
7690
-
7706
+ }, [columnOrder, props.editingMode, props.enableEditing, props.enableExpandAll, props.enableExpanding, props.enableGrouping, props.enableRowActions, props.enableRowNumbers, props.enableRowSelection, props.enableSelectAll, props.localization, props.muiTableBodyCellProps, props.muiTableHeadCellProps, props.positionActionsColumn, table]);
7691
7707
  var columns = React.useMemo(function () {
7692
- return [].concat(leadingDisplayColumns, props.columns.map(function (column) {
7708
+ return [].concat(displayColumns, props.columns.map(function (column) {
7693
7709
  return column.columns ? createGroup(table, column, currentFilterFns) : createDataColumn(table, column, currentFilterFns);
7694
- }), trailingDisplayColumns);
7710
+ }));
7695
7711
  }, [table, props.columns, currentFilterFns]);
7696
7712
  var data = React.useMemo(function () {
7697
7713
  var _props$state, _props$state2;
@@ -7705,13 +7721,17 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
7705
7721
  }) : props.data;
7706
7722
  }, [props.data, (_props$state3 = props.state) == null ? void 0 : _props$state3.isLoading, (_props$state4 = props.state) == null ? void 0 : _props$state4.showSkeletons]); //@ts-ignore
7707
7723
 
7708
- var instance = _extends({}, reactTable.useTableInstance(table, _extends({}, props, {
7724
+ var instance = _extends({}, reactTable.useTableInstance(table, _extends({
7725
+ onColumnOrderChange: setColumnOrder
7726
+ }, props, {
7709
7727
  //@ts-ignore
7710
7728
  columns: columns,
7711
7729
  data: data,
7712
7730
  //@ts-ignore
7713
7731
  globalFilterFn: currentGlobalFilterFn,
7732
+ initialState: initialState,
7714
7733
  state: _extends({
7734
+ columnOrder: columnOrder,
7715
7735
  currentEditingCell: currentEditingCell,
7716
7736
  currentEditingRow: currentEditingRow,
7717
7737
  currentFilterFns: currentFilterFns,
@@ -7772,7 +7792,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
7772
7792
  }));
7773
7793
  };
7774
7794
 
7775
- var _excluded$5 = ["autoResetExpanded", "columnResizeMode", "defaultColumn", "editingMode", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensePaddingToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enablePagination", "enablePinning", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarBottom", "enableToolbarInternalActions", "enableToolbarTop", "icons", "localization", "persistentStateMode", "positionActionsColumn", "positionPagination", "positionGlobalFilter", "positionToolbarActions", "positionToolbarAlertBanner", "rowNumberMode", "selectAllMode"];
7795
+ var _excluded$5 = ["autoResetExpanded", "columnResizeMode", "defaultColumn", "editingMode", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enablePagination", "enablePinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarBottom", "enableToolbarInternalActions", "enableToolbarTop", "icons", "localization", "persistentStateMode", "positionActionsColumn", "positionGlobalFilter", "positionPagination", "positionToolbarActions", "positionToolbarAlertBanner", "rowNumberMode", "selectAllMode"];
7776
7796
  var MaterialReactTable = (function (_ref) {
7777
7797
  var _ref$autoResetExpande = _ref.autoResetExpanded,
7778
7798
  autoResetExpanded = _ref$autoResetExpande === void 0 ? false : _ref$autoResetExpande,
@@ -7794,8 +7814,8 @@ var MaterialReactTable = (function (_ref) {
7794
7814
  enableColumnOrdering = _ref$enableColumnOrde === void 0 ? false : _ref$enableColumnOrde,
7795
7815
  _ref$enableColumnResi = _ref.enableColumnResizing,
7796
7816
  enableColumnResizing = _ref$enableColumnResi === void 0 ? false : _ref$enableColumnResi,
7797
- _ref$enableDensePaddi = _ref.enableDensePaddingToggle,
7798
- enableDensePaddingToggle = _ref$enableDensePaddi === void 0 ? true : _ref$enableDensePaddi,
7817
+ _ref$enableDensityTog = _ref.enableDensityToggle,
7818
+ enableDensityToggle = _ref$enableDensityTog === void 0 ? true : _ref$enableDensityTog,
7799
7819
  _ref$enableExpandAll = _ref.enableExpandAll,
7800
7820
  enableExpandAll = _ref$enableExpandAll === void 0 ? true : _ref$enableExpandAll,
7801
7821
  _ref$enableFilters = _ref.enableFilters,
@@ -7814,6 +7834,8 @@ var MaterialReactTable = (function (_ref) {
7814
7834
  enablePagination = _ref$enablePagination === void 0 ? true : _ref$enablePagination,
7815
7835
  _ref$enablePinning = _ref.enablePinning,
7816
7836
  enablePinning = _ref$enablePinning === void 0 ? false : _ref$enablePinning,
7837
+ _ref$enableRowSelecti = _ref.enableRowSelection,
7838
+ enableRowSelection = _ref$enableRowSelecti === void 0 ? false : _ref$enableRowSelecti,
7817
7839
  _ref$enableSelectAll = _ref.enableSelectAll,
7818
7840
  enableSelectAll = _ref$enableSelectAll === void 0 ? true : _ref$enableSelectAll,
7819
7841
  _ref$enableSorting = _ref.enableSorting,
@@ -7836,10 +7858,10 @@ var MaterialReactTable = (function (_ref) {
7836
7858
  persistentStateMode = _ref$persistentStateM === void 0 ? 'sessionStorage' : _ref$persistentStateM,
7837
7859
  _ref$positionActionsC = _ref.positionActionsColumn,
7838
7860
  positionActionsColumn = _ref$positionActionsC === void 0 ? 'first' : _ref$positionActionsC,
7839
- _ref$positionPaginati = _ref.positionPagination,
7840
- positionPagination = _ref$positionPaginati === void 0 ? 'bottom' : _ref$positionPaginati,
7841
7861
  _ref$positionGlobalFi = _ref.positionGlobalFilter,
7842
7862
  positionGlobalFilter = _ref$positionGlobalFi === void 0 ? 'right' : _ref$positionGlobalFi,
7863
+ _ref$positionPaginati = _ref.positionPagination,
7864
+ positionPagination = _ref$positionPaginati === void 0 ? 'bottom' : _ref$positionPaginati,
7843
7865
  _ref$positionToolbarA = _ref.positionToolbarActions,
7844
7866
  positionToolbarActions = _ref$positionToolbarA === void 0 ? 'top' : _ref$positionToolbarA,
7845
7867
  _ref$positionToolbarA2 = _ref.positionToolbarAlertBanner,
@@ -7859,7 +7881,7 @@ var MaterialReactTable = (function (_ref) {
7859
7881
  enableColumnFilters: enableColumnFilters,
7860
7882
  enableColumnOrdering: enableColumnOrdering,
7861
7883
  enableColumnResizing: enableColumnResizing,
7862
- enableDensePaddingToggle: enableDensePaddingToggle,
7884
+ enableDensityToggle: enableDensityToggle,
7863
7885
  enableExpandAll: enableExpandAll,
7864
7886
  enableFilters: enableFilters,
7865
7887
  enableFullScreenToggle: enableFullScreenToggle,
@@ -7869,6 +7891,7 @@ var MaterialReactTable = (function (_ref) {
7869
7891
  enableMultiRowSelection: enableMultiRowSelection,
7870
7892
  enablePagination: enablePagination,
7871
7893
  enablePinning: enablePinning,
7894
+ enableRowSelection: enableRowSelection,
7872
7895
  enableSelectAll: enableSelectAll,
7873
7896
  enableSorting: enableSorting,
7874
7897
  enableStickyHeader: enableStickyHeader,