@prt-ts/fluent-react-table-v2 9.46.8-build.8.0 → 9.46.8-build.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/index.cjs.js +17 -2
  2. package/index.esm.js +17 -2
  3. package/package.json +1 -1
  4. package/src/lib/index.d.ts +2 -1
  5. package/src/lib/types/TableProps.d.ts +5 -0
package/index.cjs.js CHANGED
@@ -1045,6 +1045,10 @@ const SearchRegular = /*#__PURE__*/createFluentIcon('SearchRegular', "1em", ["M8
1045
1045
  const TableSimpleCheckmarkFilled = /*#__PURE__*/createFluentIcon('TableSimpleCheckmarkFilled', "1em", ["M14 17h-3.5v-6.5H17V14a3 3 0 0 1-3 3Zm3-7.5h-6.5V3H14a3 3 0 0 1 3 3v3.5Zm-7.5 0V3H6a3 3 0 0 0-3 3v3.5h6.5Zm0 7.5v-6.5H3V14a3 3 0 0 0 3 3h3.5Zm5.85-3.9a.5.5 0 0 0-.7-.7l-1.4 1.4-.4-.4a.5.5 0 0 0-.7.7l.75.75c.2.2.5.2.7 0l1.75-1.75Z"]);
1046
1046
  const TableSimpleCheckmarkRegular = /*#__PURE__*/createFluentIcon('TableSimpleCheckmarkRegular', "1em", ["M6 3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H6ZM4 6c0-1.1.9-2 2-2h3.5v5.5H4V6Zm6.5 3.5V4H14a2 2 0 0 1 2 2v3.5h-5.5Zm-6.5 1h5.5V16H6a2 2 0 0 1-2-2v-3.5Zm10.86 1.4c.2.2.2.5 0 .7l-1.75 1.75a.5.5 0 0 1-.71 0l-.75-.75a.5.5 0 0 1 .7-.7l.4.4 1.4-1.4c.2-.2.51-.2.7 0Z"]);
1047
1047
  const TextClearFormattingFilled = /*#__PURE__*/createFluentIcon('TextClearFormattingFilled', "1em", ["M6 2c.2 0 .4.13.47.32l3.5 8.95a.5.5 0 0 1-.94.37L8.01 9H4l-1.04 2.68a.5.5 0 1 1-.94-.36l3.5-9A.5.5 0 0 1 6 2Zm0 1.88L4.4 8H7.6l-1.6-4.12ZM11.5 2c.28 0 .5.22.5.5v3.52a2.48 2.48 0 0 1 2.26-1.3c.89 0 1.6.34 2.15 1 .55.66.82 1.54.82 2.64l-.01.42-.05-.05a2.49 2.49 0 0 0-1.15-.65 2.86 2.86 0 0 0-.53-1.62c-.36-.47-.86-.7-1.48-.7-.6 0-1.09.24-1.47.72-.3.37-.47.83-.54 1.37v1.03c.05.43.18.8.37 1.12L11 11.37V2.5c0-.28.22-.5.5-.5Zm4.97 7.44 2.1 2.1a1.5 1.5 0 0 1-.01 2.12l-3.6 3.6-4.21-4.22 3.6-3.6a1.5 1.5 0 0 1 2.12 0Zm-2.22 8.52-4.21-4.21-.6.6a1.5 1.5 0 0 0 0 2.12l2.1 2.1c.3.3.71.45 1.12.43h4.09a.5.5 0 1 0 0-1h-2.53l.03-.04Z"]);
1048
+ const TextCollapseFilled = /*#__PURE__*/createFluentIcon('TextCollapseFilled', "1em", ["M5 3.5c0-.41.34-.75.75-.75h11.5a.75.75 0 0 1 0 1.5H5.75A.75.75 0 0 1 5 3.5Zm0 12c0-.41.34-.75.75-.75h11.5a.75.75 0 0 1 0 1.5H5.75A.75.75 0 0 1 5 15.5Zm6.75-8.75a.75.75 0 0 0 0 1.5h5.5a.75.75 0 0 0 0-1.5h-5.5ZM11 11.5c0-.41.34-.75.75-.75h5.5a.75.75 0 0 1 0 1.5h-5.5a.75.75 0 0 1-.75-.75Zm-2-2a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Zm-6 0c0 .28.22.5.5.5h4a.5.5 0 0 0 0-1h-4a.5.5 0 0 0-.5.5Z"]);
1049
+ const TextCollapseRegular = /*#__PURE__*/createFluentIcon('TextCollapseRegular', "1em", ["M5 3.5c0-.28.22-.5.5-.5h12a.5.5 0 0 1 0 1h-12a.5.5 0 0 1-.5-.5Zm0 12c0-.28.22-.5.5-.5h12a.5.5 0 0 1 0 1h-12a.5.5 0 0 1-.5-.5Zm6-8c0-.28.22-.5.5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5Zm0 4c0-.28.22-.5.5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5Zm-2-2a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0ZM3.5 9a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1h-4Z"]);
1050
+ const TextExpandFilled = /*#__PURE__*/createFluentIcon('TextExpandFilled', "1em", ["M4.75 3.5a.75.75 0 0 0 0 1.5h12.5a.75.75 0 0 0 0-1.5H4.75ZM4 16.25c0-.41.34-.75.75-.75h12.5a.75.75 0 0 1 0 1.5H4.75a.75.75 0 0 1-.75-.75Zm7-4c0-.41.34-.75.75-.75h5.5a.75.75 0 0 1 0 1.5h-5.5a.75.75 0 0 1-.75-.75Zm0-4c0-.41.34-.75.75-.75h5.5a.75.75 0 0 1 0 1.5h-5.5a.75.75 0 0 1-.75-.75ZM5.5 14a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7ZM6 8.5V10h1.5a.5.5 0 0 1 0 1H6v1.5a.5.5 0 0 1-1 0V11H3.5a.5.5 0 0 1 0-1H5V8.5a.5.5 0 0 1 1 0Z"]);
1051
+ const TextExpandRegular = /*#__PURE__*/createFluentIcon('TextExpandRegular', "1em", ["M4 4.5c0-.28.22-.5.5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5Zm0 12c0-.28.22-.5.5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5Zm6-4c0-.28.22-.5.5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm0-4c0-.28.22-.5.5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5ZM5.5 14a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7ZM6 8.5a.5.5 0 0 0-1 0V10H3.5a.5.5 0 0 0 0 1H5v1.5a.5.5 0 0 0 1 0V11h1.5a.5.5 0 0 0 0-1H6V8.5Z"]);
1048
1052
  const TextSortAscendingFilled = /*#__PURE__*/createFluentIcon('TextSortAscendingFilled', "1em", ["M6.7 2.5a.75.75 0 0 0-1.4 0L3.03 9a.75.75 0 0 0 1.42.5l.34-1h2.4l.34 1A.75.75 0 0 0 8.96 9L6.7 2.5ZM6 5.04 6.68 7H5.32L6 5.04ZM4 11a.75.75 0 0 0 0 1.5h2.53l-3.14 4.3A.75.75 0 0 0 4 18h4a.75.75 0 0 0 0-1.5H5.47l3.14-4.3A.75.75 0 0 0 8 11H4Zm10.25-9c.41 0 .75.34.75.75v12.57l1.45-1.58a.75.75 0 0 1 1.1 1.02l-2.75 3a.75.75 0 0 1-1.1 0l-2.75-3a.75.75 0 0 1 1.1-1.02l1.45 1.58V2.75c0-.41.34-.75.75-.75Z"]);
1049
1053
  const TextSortDescendingFilled = /*#__PURE__*/createFluentIcon('TextSortDescendingFilled', "1em", ["M4 2a.75.75 0 1 0 0 1.5h2.53L3.39 7.8A.75.75 0 0 0 4 9h4a.75.75 0 0 0 0-1.5H5.47l3.14-4.3A.75.75 0 0 0 8 2H4Zm2.7 8.5a.75.75 0 0 0-1.4 0L3.03 17a.75.75 0 1 0 1.42.5l.34-1h2.4l.34 1a.75.75 0 1 0 1.42-.5L6.7 10.5ZM6 13.04 6.68 15H5.32L6 13.04ZM14.25 2c.41 0 .75.34.75.75v12.57l1.45-1.58a.75.75 0 0 1 1.1 1.02l-2.75 3a.75.75 0 0 1-1.1 0l-2.75-3a.75.75 0 0 1 1.1-1.02l1.45 1.58V2.75c0-.41.34-.75.75-.75Z"]);
1050
1054
 
@@ -1293,7 +1297,7 @@ function tableReducer(state, action) {
1293
1297
  }
1294
1298
 
1295
1299
  const useGridContainer = (props, ref) => {
1296
- var _a, _b, _c, _d, _e, _f, _g, _h, _j;
1300
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
1297
1301
  const { defaultColumn, columns, data, rowSelectionMode, autoResetPageIndex, onUpdateData } = props;
1298
1302
  const [drawerState, dispatch] = React__namespace.useReducer(tableReducer, {
1299
1303
  isFilterDrawerOpen: false,
@@ -1386,6 +1390,7 @@ const useGridContainer = (props, ref) => {
1386
1390
  meta: {
1387
1391
  pageSizeOptions: props.pageSizeOptions || [10, 20, 50, 100, 1000],
1388
1392
  rowSelectionMode: props.rowSelectionMode,
1393
+ isAutoExpandOnGroup: (_k = props.isAutoExpandOnGroup) !== null && _k !== void 0 ? _k : false,
1389
1394
  tableHeight: props.tableHeight || "650px",
1390
1395
  updateData: onUpdateData,
1391
1396
  onTableViewDelete: props.onTableViewDelete,
@@ -1586,6 +1591,8 @@ const SortAscIcon = bundleIcon$1(ArrowSortDown20Filled, ArrowSortDown20Regular);
1586
1591
  const SortDescIcon = bundleIcon$1(ArrowSortUp20Filled, ArrowSortUp20Regular);
1587
1592
  const PinIcon = bundleIcon$1(PinFilled, PinRegular);
1588
1593
  const HideColumnIcon = bundleIcon$1(EyeTrackingOffFilled, EyeTrackingOffRegular);
1594
+ const GroupExpandIcon = bundleIcon$1(TextExpandFilled, TextExpandRegular);
1595
+ const GroupCollapseIcon = bundleIcon$1(TextCollapseFilled, TextCollapseRegular);
1589
1596
  function HeaderCell({ header, table, hideMenu, headerDepth, totalNumberOfHeaderDepth, }) {
1590
1597
  var _a;
1591
1598
  const { column } = header;
@@ -1647,7 +1654,15 @@ function HeaderMenu(props) {
1647
1654
  var _a;
1648
1655
  const isControlKeySelected = e.ctrlKey;
1649
1656
  (_a = header.column) === null || _a === void 0 ? void 0 : _a.toggleSorting(true, isControlKeySelected);
1650
- }, icon: jsxRuntime.jsx(TextSortDescendingFilled, {}), disabled: header.column.getIsSorted() === 'desc', children: "Sort Z to A" }), jsxRuntime.jsx(reactComponents.MenuDivider, {})] }, 'sort-group') }), jsxRuntime.jsx(reactControlFlow.Show, { when: header.column.getCanGroup(), children: jsxRuntime.jsxs(reactComponents.MenuGroup, { children: [!header.column.getIsGrouped() && (jsxRuntime.jsxs(reactComponents.MenuItem, { onClick: () => header.column.getToggleGroupingHandler()(), icon: jsxRuntime.jsx(GroupFilled, {}), children: ["Group Column (by ", columnName, ")"] })), header.column.getIsGrouped() && (jsxRuntime.jsxs(reactComponents.MenuItem, { onClick: () => header.column.getToggleGroupingHandler()(), icon: jsxRuntime.jsx(GroupDismissFilled, {}), children: ["Remove Grouping (on ", columnName, ")"] })), jsxRuntime.jsx(reactComponents.MenuDivider, {})] }, 'grouping-group') }), jsxRuntime.jsx(reactControlFlow.Show, { when: header.column.getCanPin(), children: jsxRuntime.jsxs(reactComponents.Menu, { children: [jsxRuntime.jsx(reactComponents.MenuTrigger, { disableButtonEnhancement: true, children: jsxRuntime.jsxs(reactComponents.MenuItem, { icon: jsxRuntime.jsx(PinIcon, {}), children: ["Pin Column (", columnName, ")"] }) }), jsxRuntime.jsx(reactComponents.MenuPopover, { children: jsxRuntime.jsxs(reactComponents.MenuList, { children: [jsxRuntime.jsx(reactComponents.MenuItem, { onClick: () => {
1657
+ }, icon: jsxRuntime.jsx(TextSortDescendingFilled, {}), disabled: header.column.getIsSorted() === 'desc', children: "Sort Z to A" }), jsxRuntime.jsx(reactComponents.MenuDivider, {})] }, 'sort-group') }), jsxRuntime.jsx(reactControlFlow.Show, { when: header.column.getCanGroup(), children: jsxRuntime.jsxs(reactComponents.MenuGroup, { children: [!header.column.getIsGrouped() && (jsxRuntime.jsxs(reactComponents.MenuItem, { onClick: () => {
1658
+ header.column.getToggleGroupingHandler()();
1659
+ const { isAutoExpandOnGroup } = table.options.meta;
1660
+ if (isAutoExpandOnGroup) {
1661
+ table.toggleAllRowsExpanded(true);
1662
+ }
1663
+ }, icon: jsxRuntime.jsx(GroupFilled, {}), children: ["Group Column (by ", columnName, ")"] })), jsxRuntime.jsxs(reactControlFlow.Show, { when: header.column.getIsGrouped(), children: [jsxRuntime.jsxs(reactComponents.MenuItem, { onClick: () => {
1664
+ header.column.getToggleGroupingHandler()();
1665
+ }, icon: jsxRuntime.jsx(GroupDismissFilled, {}), children: ["Remove Grouping (on ", columnName, ")"] }), jsxRuntime.jsx(reactComponents.MenuItem, { onClick: () => table.toggleAllRowsExpanded(), icon: table.getIsAllRowsExpanded() ? jsxRuntime.jsx(GroupCollapseIcon, {}) : jsxRuntime.jsx(GroupExpandIcon, {}), children: jsxRuntime.jsx(reactControlFlow.Show, { when: table.getIsAllRowsExpanded(), fallback: jsxRuntime.jsx(jsxRuntime.Fragment, { children: "Expand All Groups" }), children: "Collapse All Groups" }) })] }), jsxRuntime.jsx(reactComponents.MenuDivider, {})] }, 'grouping-group') }), jsxRuntime.jsx(reactControlFlow.Show, { when: header.column.getCanPin(), children: jsxRuntime.jsxs(reactComponents.Menu, { children: [jsxRuntime.jsx(reactComponents.MenuTrigger, { disableButtonEnhancement: true, children: jsxRuntime.jsxs(reactComponents.MenuItem, { icon: jsxRuntime.jsx(PinIcon, {}), children: ["Pin Column (", columnName, ")"] }) }), jsxRuntime.jsx(reactComponents.MenuPopover, { children: jsxRuntime.jsxs(reactComponents.MenuList, { children: [jsxRuntime.jsx(reactComponents.MenuItem, { onClick: () => {
1651
1666
  var _a;
1652
1667
  (_a = header.column) === null || _a === void 0 ? void 0 : _a.pin(false);
1653
1668
  }, icon: jsxRuntime.jsx(PinOffRegular, {}), disabled: !(['left', 'right'].includes(header.column.getIsPinned())), children: "No Pin" }), jsxRuntime.jsx(reactComponents.MenuItem, { onClick: () => {
package/index.esm.js CHANGED
@@ -1023,6 +1023,10 @@ const SearchRegular = /*#__PURE__*/createFluentIcon('SearchRegular', "1em", ["M8
1023
1023
  const TableSimpleCheckmarkFilled = /*#__PURE__*/createFluentIcon('TableSimpleCheckmarkFilled', "1em", ["M14 17h-3.5v-6.5H17V14a3 3 0 0 1-3 3Zm3-7.5h-6.5V3H14a3 3 0 0 1 3 3v3.5Zm-7.5 0V3H6a3 3 0 0 0-3 3v3.5h6.5Zm0 7.5v-6.5H3V14a3 3 0 0 0 3 3h3.5Zm5.85-3.9a.5.5 0 0 0-.7-.7l-1.4 1.4-.4-.4a.5.5 0 0 0-.7.7l.75.75c.2.2.5.2.7 0l1.75-1.75Z"]);
1024
1024
  const TableSimpleCheckmarkRegular = /*#__PURE__*/createFluentIcon('TableSimpleCheckmarkRegular', "1em", ["M6 3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H6ZM4 6c0-1.1.9-2 2-2h3.5v5.5H4V6Zm6.5 3.5V4H14a2 2 0 0 1 2 2v3.5h-5.5Zm-6.5 1h5.5V16H6a2 2 0 0 1-2-2v-3.5Zm10.86 1.4c.2.2.2.5 0 .7l-1.75 1.75a.5.5 0 0 1-.71 0l-.75-.75a.5.5 0 0 1 .7-.7l.4.4 1.4-1.4c.2-.2.51-.2.7 0Z"]);
1025
1025
  const TextClearFormattingFilled = /*#__PURE__*/createFluentIcon('TextClearFormattingFilled', "1em", ["M6 2c.2 0 .4.13.47.32l3.5 8.95a.5.5 0 0 1-.94.37L8.01 9H4l-1.04 2.68a.5.5 0 1 1-.94-.36l3.5-9A.5.5 0 0 1 6 2Zm0 1.88L4.4 8H7.6l-1.6-4.12ZM11.5 2c.28 0 .5.22.5.5v3.52a2.48 2.48 0 0 1 2.26-1.3c.89 0 1.6.34 2.15 1 .55.66.82 1.54.82 2.64l-.01.42-.05-.05a2.49 2.49 0 0 0-1.15-.65 2.86 2.86 0 0 0-.53-1.62c-.36-.47-.86-.7-1.48-.7-.6 0-1.09.24-1.47.72-.3.37-.47.83-.54 1.37v1.03c.05.43.18.8.37 1.12L11 11.37V2.5c0-.28.22-.5.5-.5Zm4.97 7.44 2.1 2.1a1.5 1.5 0 0 1-.01 2.12l-3.6 3.6-4.21-4.22 3.6-3.6a1.5 1.5 0 0 1 2.12 0Zm-2.22 8.52-4.21-4.21-.6.6a1.5 1.5 0 0 0 0 2.12l2.1 2.1c.3.3.71.45 1.12.43h4.09a.5.5 0 1 0 0-1h-2.53l.03-.04Z"]);
1026
+ const TextCollapseFilled = /*#__PURE__*/createFluentIcon('TextCollapseFilled', "1em", ["M5 3.5c0-.41.34-.75.75-.75h11.5a.75.75 0 0 1 0 1.5H5.75A.75.75 0 0 1 5 3.5Zm0 12c0-.41.34-.75.75-.75h11.5a.75.75 0 0 1 0 1.5H5.75A.75.75 0 0 1 5 15.5Zm6.75-8.75a.75.75 0 0 0 0 1.5h5.5a.75.75 0 0 0 0-1.5h-5.5ZM11 11.5c0-.41.34-.75.75-.75h5.5a.75.75 0 0 1 0 1.5h-5.5a.75.75 0 0 1-.75-.75Zm-2-2a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Zm-6 0c0 .28.22.5.5.5h4a.5.5 0 0 0 0-1h-4a.5.5 0 0 0-.5.5Z"]);
1027
+ const TextCollapseRegular = /*#__PURE__*/createFluentIcon('TextCollapseRegular', "1em", ["M5 3.5c0-.28.22-.5.5-.5h12a.5.5 0 0 1 0 1h-12a.5.5 0 0 1-.5-.5Zm0 12c0-.28.22-.5.5-.5h12a.5.5 0 0 1 0 1h-12a.5.5 0 0 1-.5-.5Zm6-8c0-.28.22-.5.5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5Zm0 4c0-.28.22-.5.5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5Zm-2-2a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0ZM3.5 9a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1h-4Z"]);
1028
+ const TextExpandFilled = /*#__PURE__*/createFluentIcon('TextExpandFilled', "1em", ["M4.75 3.5a.75.75 0 0 0 0 1.5h12.5a.75.75 0 0 0 0-1.5H4.75ZM4 16.25c0-.41.34-.75.75-.75h12.5a.75.75 0 0 1 0 1.5H4.75a.75.75 0 0 1-.75-.75Zm7-4c0-.41.34-.75.75-.75h5.5a.75.75 0 0 1 0 1.5h-5.5a.75.75 0 0 1-.75-.75Zm0-4c0-.41.34-.75.75-.75h5.5a.75.75 0 0 1 0 1.5h-5.5a.75.75 0 0 1-.75-.75ZM5.5 14a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7ZM6 8.5V10h1.5a.5.5 0 0 1 0 1H6v1.5a.5.5 0 0 1-1 0V11H3.5a.5.5 0 0 1 0-1H5V8.5a.5.5 0 0 1 1 0Z"]);
1029
+ const TextExpandRegular = /*#__PURE__*/createFluentIcon('TextExpandRegular', "1em", ["M4 4.5c0-.28.22-.5.5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5Zm0 12c0-.28.22-.5.5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5Zm6-4c0-.28.22-.5.5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm0-4c0-.28.22-.5.5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5ZM5.5 14a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7ZM6 8.5a.5.5 0 0 0-1 0V10H3.5a.5.5 0 0 0 0 1H5v1.5a.5.5 0 0 0 1 0V11h1.5a.5.5 0 0 0 0-1H6V8.5Z"]);
1026
1030
  const TextSortAscendingFilled = /*#__PURE__*/createFluentIcon('TextSortAscendingFilled', "1em", ["M6.7 2.5a.75.75 0 0 0-1.4 0L3.03 9a.75.75 0 0 0 1.42.5l.34-1h2.4l.34 1A.75.75 0 0 0 8.96 9L6.7 2.5ZM6 5.04 6.68 7H5.32L6 5.04ZM4 11a.75.75 0 0 0 0 1.5h2.53l-3.14 4.3A.75.75 0 0 0 4 18h4a.75.75 0 0 0 0-1.5H5.47l3.14-4.3A.75.75 0 0 0 8 11H4Zm10.25-9c.41 0 .75.34.75.75v12.57l1.45-1.58a.75.75 0 0 1 1.1 1.02l-2.75 3a.75.75 0 0 1-1.1 0l-2.75-3a.75.75 0 0 1 1.1-1.02l1.45 1.58V2.75c0-.41.34-.75.75-.75Z"]);
1027
1031
  const TextSortDescendingFilled = /*#__PURE__*/createFluentIcon('TextSortDescendingFilled', "1em", ["M4 2a.75.75 0 1 0 0 1.5h2.53L3.39 7.8A.75.75 0 0 0 4 9h4a.75.75 0 0 0 0-1.5H5.47l3.14-4.3A.75.75 0 0 0 8 2H4Zm2.7 8.5a.75.75 0 0 0-1.4 0L3.03 17a.75.75 0 1 0 1.42.5l.34-1h2.4l.34 1a.75.75 0 1 0 1.42-.5L6.7 10.5ZM6 13.04 6.68 15H5.32L6 13.04ZM14.25 2c.41 0 .75.34.75.75v12.57l1.45-1.58a.75.75 0 0 1 1.1 1.02l-2.75 3a.75.75 0 0 1-1.1 0l-2.75-3a.75.75 0 0 1 1.1-1.02l1.45 1.58V2.75c0-.41.34-.75.75-.75Z"]);
1028
1032
 
@@ -1271,7 +1275,7 @@ function tableReducer(state, action) {
1271
1275
  }
1272
1276
 
1273
1277
  const useGridContainer = (props, ref) => {
1274
- var _a, _b, _c, _d, _e, _f, _g, _h, _j;
1278
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
1275
1279
  const { defaultColumn, columns, data, rowSelectionMode, autoResetPageIndex, onUpdateData } = props;
1276
1280
  const [drawerState, dispatch] = React.useReducer(tableReducer, {
1277
1281
  isFilterDrawerOpen: false,
@@ -1364,6 +1368,7 @@ const useGridContainer = (props, ref) => {
1364
1368
  meta: {
1365
1369
  pageSizeOptions: props.pageSizeOptions || [10, 20, 50, 100, 1000],
1366
1370
  rowSelectionMode: props.rowSelectionMode,
1371
+ isAutoExpandOnGroup: (_k = props.isAutoExpandOnGroup) !== null && _k !== void 0 ? _k : false,
1367
1372
  tableHeight: props.tableHeight || "650px",
1368
1373
  updateData: onUpdateData,
1369
1374
  onTableViewDelete: props.onTableViewDelete,
@@ -1564,6 +1569,8 @@ const SortAscIcon = bundleIcon$1(ArrowSortDown20Filled, ArrowSortDown20Regular);
1564
1569
  const SortDescIcon = bundleIcon$1(ArrowSortUp20Filled, ArrowSortUp20Regular);
1565
1570
  const PinIcon = bundleIcon$1(PinFilled, PinRegular);
1566
1571
  const HideColumnIcon = bundleIcon$1(EyeTrackingOffFilled, EyeTrackingOffRegular);
1572
+ const GroupExpandIcon = bundleIcon$1(TextExpandFilled, TextExpandRegular);
1573
+ const GroupCollapseIcon = bundleIcon$1(TextCollapseFilled, TextCollapseRegular);
1567
1574
  function HeaderCell({ header, table, hideMenu, headerDepth, totalNumberOfHeaderDepth, }) {
1568
1575
  var _a;
1569
1576
  const { column } = header;
@@ -1625,7 +1632,15 @@ function HeaderMenu(props) {
1625
1632
  var _a;
1626
1633
  const isControlKeySelected = e.ctrlKey;
1627
1634
  (_a = header.column) === null || _a === void 0 ? void 0 : _a.toggleSorting(true, isControlKeySelected);
1628
- }, icon: jsx(TextSortDescendingFilled, {}), disabled: header.column.getIsSorted() === 'desc', children: "Sort Z to A" }), jsx(MenuDivider, {})] }, 'sort-group') }), jsx(Show, { when: header.column.getCanGroup(), children: jsxs(MenuGroup, { children: [!header.column.getIsGrouped() && (jsxs(MenuItem, { onClick: () => header.column.getToggleGroupingHandler()(), icon: jsx(GroupFilled, {}), children: ["Group Column (by ", columnName, ")"] })), header.column.getIsGrouped() && (jsxs(MenuItem, { onClick: () => header.column.getToggleGroupingHandler()(), icon: jsx(GroupDismissFilled, {}), children: ["Remove Grouping (on ", columnName, ")"] })), jsx(MenuDivider, {})] }, 'grouping-group') }), jsx(Show, { when: header.column.getCanPin(), children: jsxs(Menu, { children: [jsx(MenuTrigger, { disableButtonEnhancement: true, children: jsxs(MenuItem, { icon: jsx(PinIcon, {}), children: ["Pin Column (", columnName, ")"] }) }), jsx(MenuPopover, { children: jsxs(MenuList, { children: [jsx(MenuItem, { onClick: () => {
1635
+ }, icon: jsx(TextSortDescendingFilled, {}), disabled: header.column.getIsSorted() === 'desc', children: "Sort Z to A" }), jsx(MenuDivider, {})] }, 'sort-group') }), jsx(Show, { when: header.column.getCanGroup(), children: jsxs(MenuGroup, { children: [!header.column.getIsGrouped() && (jsxs(MenuItem, { onClick: () => {
1636
+ header.column.getToggleGroupingHandler()();
1637
+ const { isAutoExpandOnGroup } = table.options.meta;
1638
+ if (isAutoExpandOnGroup) {
1639
+ table.toggleAllRowsExpanded(true);
1640
+ }
1641
+ }, icon: jsx(GroupFilled, {}), children: ["Group Column (by ", columnName, ")"] })), jsxs(Show, { when: header.column.getIsGrouped(), children: [jsxs(MenuItem, { onClick: () => {
1642
+ header.column.getToggleGroupingHandler()();
1643
+ }, icon: jsx(GroupDismissFilled, {}), children: ["Remove Grouping (on ", columnName, ")"] }), jsx(MenuItem, { onClick: () => table.toggleAllRowsExpanded(), icon: table.getIsAllRowsExpanded() ? jsx(GroupCollapseIcon, {}) : jsx(GroupExpandIcon, {}), children: jsx(Show, { when: table.getIsAllRowsExpanded(), fallback: jsx(Fragment, { children: "Expand All Groups" }), children: "Collapse All Groups" }) })] }), jsx(MenuDivider, {})] }, 'grouping-group') }), jsx(Show, { when: header.column.getCanPin(), children: jsxs(Menu, { children: [jsx(MenuTrigger, { disableButtonEnhancement: true, children: jsxs(MenuItem, { icon: jsx(PinIcon, {}), children: ["Pin Column (", columnName, ")"] }) }), jsx(MenuPopover, { children: jsxs(MenuList, { children: [jsx(MenuItem, { onClick: () => {
1629
1644
  var _a;
1630
1645
  (_a = header.column) === null || _a === void 0 ? void 0 : _a.pin(false);
1631
1646
  }, icon: jsx(PinOffRegular, {}), disabled: !(['left', 'right'].includes(header.column.getIsPinned())), children: "No Pin" }), jsx(MenuItem, { onClick: () => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@prt-ts/fluent-react-table-v2",
3
- "version": "9.46.8-build.8.0",
3
+ "version": "9.46.8-build.9.0",
4
4
  "peerDependencies": {
5
5
  "react": ">=17.0.0",
6
6
  "react-dom": ">=17.0.0",
package/src/lib/index.d.ts CHANGED
@@ -18,6 +18,7 @@ declare module '@tanstack/react-table' {
18
18
  interface TableMeta<TData extends RowData> {
19
19
  rowSelectionMode: TableProps<TData>["rowSelectionMode"];
20
20
  pageSizeOptions: TableProps<TData>["pageSizeOptions"];
21
+ isAutoExpandOnGroup: TableProps<TData>["isAutoExpandOnGroup"];
21
22
  tableHeight: string;
22
23
  updateData?: (rowIndex: number, columnId: string, value: unknown) => void;
23
24
  onTableViewSave?: TableProps<TData>["onTableViewSave"];
@@ -40,5 +41,5 @@ declare module '@tanstack/react-table' {
40
41
  }
41
42
  export { Table, useSkipper } from "./components";
42
43
  export type { TableProps, TableRef, TableView } from "./types";
43
- export type { TableState, ColumnDef } from '@tanstack/react-table';
44
+ export type { TableState, ColumnDef, Column as ColumnType, Row as RowType, RowData as RowDataType, Table as TableType } from '@tanstack/react-table';
44
45
  export { createColumnHelper } from "@tanstack/react-table";
package/src/lib/types/TableProps.d.ts CHANGED
@@ -16,6 +16,11 @@ export type TableProps<TItem extends RowData> = {
16
16
  * Table loading state.
17
17
  */
18
18
  isLoading?: boolean;
19
+ /**
20
+ * While grouping isExpanded will use to make default expand state.
21
+ * @default false
22
+ */
23
+ isAutoExpandOnGroup?: boolean;
19
24
  /**
20
25
  * Grid title
21
26
  */