docs(AnalyticalTable): memoize tableHooks (#7370)

Closes #7179

Author: Lukas742

packages/main/src/components/AnalyticalTable/AnalyticalTableHooks.stories.tsx

@@ -4,7 +4,7 @@ import dataManualSelect from '@sb/mockData/FriendsManualSelect25.json';
 import dataTree from '@sb/mockData/FriendsTree.json';
 import type { Meta, StoryObj } from '@storybook/react';
 import InputType from '@ui5/webcomponents/dist/types/InputType.js';
-import { useReducer, useState } from 'react';
+import { useCallback, useMemo, useReducer, useState } from 'react';
 import { AnalyticalTableSelectionMode, FlexBoxAlignItems, FlexBoxDirection } from '../../enums';
 import { Button, CheckBox, Input, Label, ToggleButton, Text } from '../../webComponents';
 import { FlexBox } from '../FlexBox';
@@ -20,6 +20,7 @@ const pluginsMeta = {
 export default pluginsMeta;
 type Story = StoryObj<typeof pluginsMeta>;
 
+const tableHooksEmptyCells = [AnalyticalTableHooks.useAnnounceEmptyCells];
 export const PluginAnnounceEmptyCells: Story = {
   args: {
     data: [
@@ -41,19 +42,21 @@ export const PluginAnnounceEmptyCells: Story = {
         columns={args.columns}
         data={args.data}
         visibleRows={args.visibleRows}
-        tableHooks={[AnalyticalTableHooks.useAnnounceEmptyCells]}
+        tableHooks={tableHooksEmptyCells}
       />
     );
   },
 };
 
+const disableRowFunc = (row) => row.original.age < 40;
+const tableHooksDisableRowSel = [AnalyticalTableHooks.useRowDisableSelection(disableRowFunc)];
+const tableHooksDisableRowSel1 = [AnalyticalTableHooks.useRowDisableSelection('disableSelection')];
 export const PluginDisableRowSelection: Story = {
   args: {
     data: dataLarge.map((item) => ({ ...item, disableSelection: Math.random() < 0.5 })),
     selectionMode: AnalyticalTableSelectionMode.Multiple,
   },
   render: (args) => {
-    const disableRowFunc = (row) => row.original.age < 40;
     const [isFunc, setIsFunc] = useState(true);
     return (
       <>
@@ -78,7 +81,7 @@ export const PluginDisableRowSelection: Story = {
             data={args.data}
             columns={args.columns}
             selectionMode={args.selectionMode}
-            tableHooks={[AnalyticalTableHooks.useRowDisableSelection(disableRowFunc)]}
+            tableHooks={tableHooksDisableRowSel}
             visibleRows={10}
             header="All under 40 are not selectable"
           />
@@ -88,7 +91,7 @@ export const PluginDisableRowSelection: Story = {
             columns={args.columns}
             selectionMode={args.selectionMode}
             selectionBehavior={args.selectionBehavior}
-            tableHooks={[AnalyticalTableHooks.useRowDisableSelection('disableSelection')]}
+            tableHooks={tableHooksDisableRowSel1}
             visibleRows={10}
             header={`All with "disableSelection: true" are not selectable`}
           />
@@ -98,6 +101,7 @@ export const PluginDisableRowSelection: Story = {
   },
 };
 
+const tableHooksIndeterminateRowSel = [AnalyticalTableHooks.useIndeterminateRowSelection()];
 export const PluginIndeterminateRowSelection: Story = {
   render: (args) => {
     const [selectSubRows, setSelectSubRows] = useReducer((prev) => !prev, true);
@@ -111,14 +115,15 @@ export const PluginIndeterminateRowSelection: Story = {
           data={dataTree}
           columns={args.columns}
           isTreeTable
-          tableHooks={[AnalyticalTableHooks.useIndeterminateRowSelection()]}
+          tableHooks={tableHooksIndeterminateRowSel}
           reactTableOptions={{ selectSubRows: selectSubRows }}
         />
       </>
     );
   },
 };
 
+const tableHooksManualRowSel = [AnalyticalTableHooks.useManualRowSelect('isSelected')];
 export const PluginManualRowSelect: Story = {
   args: {
     data: dataManualSelect,
@@ -146,7 +151,7 @@ export const PluginManualRowSelect: Story = {
           selectionMode={AnalyticalTableSelectionMode.Multiple}
           data={data}
           columns={args.columns}
-          tableHooks={[AnalyticalTableHooks.useManualRowSelect('isSelected')]}
+          tableHooks={tableHooksManualRowSel}
         />
         <Button onClick={setCollapsedCode}>Show first entries in data array</Button>
         {!collapsedCode && (
@@ -175,9 +180,17 @@ export const PluginOnColumnResize: Story = {
     const handleWaitChange = (e) => {
       setWait(parseInt(e.target.value));
     };
-    const handleColWidthUpdate = (e) => {
-      setUseColResizeEvent(e);
-    };
+    const handleColWidthUpdate = useCallback(
+      (e) => {
+        setUseColResizeEvent(e);
+      },
+      [setUseColResizeEvent],
+    );
+
+    const tableHooksColResize = useMemo(
+      () => [AnalyticalTableHooks.useOnColumnResize(handleColWidthUpdate, { liveUpdate, wait })],
+      [handleColWidthUpdate, liveUpdate, wait],
+    );
     return (
       <>
         <AnalyticalTable
@@ -196,7 +209,7 @@ export const PluginOnColumnResize: Story = {
           }
           data={args.data}
           columns={args.columns}
-          tableHooks={[AnalyticalTableHooks.useOnColumnResize(handleColWidthUpdate, { liveUpdate, wait })]}
+          tableHooks={tableHooksColResize}
         />
         {!!Object.keys(useColResizeEvent).length && (
           <FlexBox direction={FlexBoxDirection.Column}>
@@ -266,12 +279,16 @@ export const PluginOrderedMultiSort = {
     },
   },
   render(args) {
+    const tableHooksOrderedMultiSort = useMemo(
+      () => [AnalyticalTableHooks.useOrderedMultiSort(args.orderedIds)],
+      [args.orderedIds],
+    );
     return (
       <AnalyticalTable
         columns={orderedMultiSortColumns}
         data={orderedMultiSortData}
         sortable
-        tableHooks={[AnalyticalTableHooks.useOrderedMultiSort(args.orderedIds)]}
+        tableHooks={tableHooksOrderedMultiSort}
       />
     );
   },

packages/main/src/components/AnalyticalTable/PluginAnnounceEmptyCells.mdx

@@ -18,11 +18,13 @@ The `useAnnounceEmptyCells` plugin hook adds screen reader announcements for emp
 <Canvas sourceState="none" of={ComponentStories.PluginAnnounceEmptyCells} />
 
 ```jsx
+const tableHooks = [AnalyticalTableHooks.useAnnounceEmptyCells] // this array should be memoized
+
 <AnalyticalTable
   data={data}
   columns={columns}
   visibleRows={5}
-  tableHooks={[AnalyticalTableHooks.useAnnounceEmptyCells]}
+  tableHooks={tableHooks}
 />
 ```
 

packages/main/src/components/AnalyticalTable/PluginDisableRowSelection.mdx

@@ -32,34 +32,44 @@ With the `useRowDisableSelection` it's possible to disable the selection of spec
 ## Example
 
 ```jsx
+const disableRowFunc = (row) => row.original.age < 40;
+const tableHooks = [
+  AnalyticalTableHooks.useRowDisableSelection(disableRowFunc),
+];
 const WithFunctionParameter = () => {
-  const disableRowFunc = (row) => row.original.age < 40;
+
   return (
     <AnalyticalTable
       data={data}
       columns={columns}
       selectionMode={AnalyticalTableSelectionMode.Multiple}
-      tableHooks={[AnalyticalTableHooks.useRowDisableSelection(disableRowFunc)]}
+      tableHooks={tableHooks}
     />
   );
 };
 
-const WithStringParameter = () => {
+```
+
+```jsx
 const data = [
-    {
-        "name": "Peter Franco",
-        "age": 22,
-         ...
-        "disableSelection": Math.random() < 0.5
-    },
-    ...
+  {
+    name: "Peter Franco",
+    age: 22,
+    //...
+    disableSelection: Math.random() < 0.5,
+  },
+  //...
 ];
+const tableHooks = [
+  AnalyticalTableHooks.useRowDisableSelection("disableSelection"),
+];
+const WithStringParameter = () => {
   return (
     <AnalyticalTable
       data={data}
       columns={columns}
       selectionMode={AnalyticalTableSelectionMode.Multiple}
-      tableHooks={[AnalyticalTableHooks.useRowDisableSelection('disableSelection')]}
+      tableHooks={tableHooks}
     />
   );
 };

packages/main/src/components/AnalyticalTable/PluginIndeterminateRowSelection.mdx

@@ -33,12 +33,14 @@ When using this hook, it is recommended to also select all sub-rows when selecti
 <Canvas sourceState="none" of={ComponentStories.PluginIndeterminateRowSelection} />
 
 ```jsx
+const tableHooks = [AnalyticalTableHooks.useIndeterminateRowSelection()]; // should be memoized
+
 <AnalyticalTable
   selectionMode={AnalyticalTableSelectionMode.Multiple}
   data={data}
   columns={columns}
   isTreeTable
-  tableHooks={[AnalyticalTableHooks.useIndeterminateRowSelection()]}
+  tableHooks={tableHooks}
   reactTableOptions={{ selectSubRows: true }}
 />
 ```

packages/main/src/components/AnalyticalTable/PluginManualRowSelect.mdx

@@ -17,12 +17,14 @@ If this key is found on the original data row, and it is `true`, this row will b
 <Canvas sourceState="none" of={ComponentStories.PluginManualRowSelect} />
 
 ```jsx
+// you could also omit the `'isSelected'`, as this is the default value
+const tableHooks = [AnalyticalTableHooks.useManualRowSelect('isSelected')]; // should be memoized
+
 <AnalyticalTable
   selectionMode={AnalyticalTableSelectionMode.Multiple}
   data={data}
   columns={columns}
-  // you could also omit the `'isSelected'`, as this is the default value
-  tableHooks={[AnalyticalTableHooks.useManualRowSelect('isSelected')]}
+  tableHooks={tableHooks}
 />
 ```
 

packages/main/src/components/AnalyticalTable/PluginOnColumnResize.mdx

@@ -23,19 +23,25 @@ The first parameter is the callback itself (`e: { columnWidth: number; header: R
 
 ```jsx
 const TableComponent = (props) => {
-  const handleColumResize = (e) => {
+  const handleColumResize = useCallback((e) => {
     console.log(e.columnWidth, e.header);
-  };
+  }, []);
+
+  const tableHooks = useMemo(
+    () => [
+      AnalyticalTableHooks.useOnColumnResize(handleColumResize, {
+        liveUpdate: false,
+        wait: 100,
+      }),
+    ],
+    [handleColumResize],
+  );
+
   return (
     <AnalyticalTable
       data={props.data}
       columns={props.columns}
-      tableHooks={[
-        AnalyticalTableHooks.useOnColumnResize(handleColumResize, {
-          liveUpdate: false,
-          wait: 100
-        })
-      ]}
+      tableHooks={tableHooks}
     />
   );
 };

packages/main/src/components/AnalyticalTable/PluginOrderedMultiSort.mdx

@@ -64,13 +64,14 @@ const data = [
   { name: 'Graham', age: 62, name2: 'Willis', age2: 26 }
 ];
 const orderedIds = ['name', 'name2', 'age', 'age2'];
+const tableHooks = [AnalyticalTableHooks.useOrderedMultiSort(orderedIds)]; // should be memoized
 const TableComponent = () => {
   return (
     <AnalyticalTable
       columns={columns}
       data={data}
       sortable
-      tableHooks={[AnalyticalTableHooks.useOrderedMultiSort(orderedIds)]}
+      tableHooks={tableHooks}
     />
   );
 };

packages/main/src/components/AnalyticalTable/types/index.ts

@@ -853,6 +853,8 @@ export interface AnalyticalTablePropTypes extends Omit<CommonProps, 'title'> {
   /**
    * You can use this prop to add custom hooks to the table.
    *
+   * __Note:__ Should be memoized!
+   *
    * @default []
    */
   tableHooks?: ((hooks: ReactTableHooks) => void)[];