more docs

Author: Lukas742

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

@@ -567,6 +567,67 @@ const TableComponent = () => {
 
 <Canvas of={ComponentStories.NoData} />
 
+### Code
+
+<details>
+
+<summary>Show static code</summary>
+
+```tsx
+function NoDataTable(props) {
+  const [selected, setSelected] = useState('noData');
+  const [filtered, setFiltered] = useState(false);
+  const handleChange: SegmentedButtonPropTypes['onSelectionChange'] = (e) => {
+    const { key } = e.detail.selectedItems[0].dataset;
+    setSelected(key);
+    if (key === 'data') {
+      setFiltered(false);
+    }
+  };
+  const handleClick: ToggleButtonPropTypes['onClick'] = (e) => {
+    setFiltered(!!e.target.pressed);
+  };
+
+  const NoDataComponent: AnalyticalTablePropTypes['NoDataComponent'] =
+    selected === 'noData'
+      ? undefined
+      : (props) => {
+          return filtered ? (
+            <IllustratedMessage role={props.role} name={NoFilterResults} />
+          ) : (
+            <IllustratedMessage role={props.role} name={NoDataIllustration} />
+          );
+        };
+  return (
+    <>
+      <SegmentedButton onSelectionChange={handleChange} accessibleName="Select data view mode">
+        <SegmentedButtonItem selected={selected === 'noData'} data-key="noData">
+          Default NoData Component
+        </SegmentedButtonItem>
+        <SegmentedButtonItem selected={selected === 'illustratedMessage'} data-key="illustratedMessage">
+          IllustratedMessage NoData Component
+        </SegmentedButtonItem>
+        <SegmentedButtonItem selected={selected === 'data'} data-key="data">
+          With Data
+        </SegmentedButtonItem>
+      </SegmentedButton>{' '}
+      |{' '}
+      <ToggleButton onClick={handleClick} pressed={filtered} disabled={selected === 'data'}>
+        Table filtered
+      </ToggleButton>
+      <AnalyticalTable
+        {...props}
+        data={selected === 'data' ? props.data : []}
+        globalFilterValue={filtered ? 'Non-existing text' : undefined}
+        NoDataComponent={NoDataComponent}
+      />
+    </>
+  );
+}
+```
+
+</details>
+
 ## Kitchen Sink
 
 <Canvas of={ComponentStories.KitchenSink} />

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

@@ -605,6 +605,24 @@ export const NoData: Story = {
       setFiltered(!!e.target.pressed);
     };
 
+    const NoDataComponent: AnalyticalTablePropTypes['NoDataComponent'] =
+      selected === 'noData'
+        ? undefined
+        : (props) => {
+            return filtered ? (
+              <IllustratedMessage role={props.role} name={NoFilterResults} />
+            ) : (
+              <IllustratedMessage role={props.role} name={NoDataIllustration} />
+            );
+          };
+
+    const tableProps = {
+      ...args,
+      data: selected === 'data' ? args.data : [],
+      globalFilterValue: filtered ? 'Non-existing text' : undefined,
+      NoDataComponent: NoDataComponent,
+    };
+
     return (
       <>
         <SegmentedButton onSelectionChange={handleChange} accessibleName="Select data view mode">
@@ -623,34 +641,11 @@ export const NoData: Story = {
           Table filtered
         </ToggleButton>
         {context.viewMode === 'story' ? (
-          <AnalyticalTable
-            {...args}
-            data={selected === 'data' ? args.data : []}
-            globalFilterValue={filtered ? 'Non-existing text' : undefined}
-            NoDataComponent={
-              selected === 'noData'
-                ? undefined
-                : (props) => {
-                    return filtered ? (
-                      <IllustratedMessage role={props.role} name={NoFilterResults} />
-                    ) : (
-                      <IllustratedMessage role={props.role} name={NoDataIllustration} />
-                    );
-                  }
-            }
-          />
+          <AnalyticalTable {...tableProps} />
         ) : (
           <>
             <hr />
-            <ToggleableTable
-              {...args}
-              data={selected === 'data' ? args.data : []}
-              NoDataComponent={
-                selected === 'noData'
-                  ? undefined
-                  : () => <IllustratedMessage role="gridcell" name={NoDataIllustration} />
-              }
-            />
+            <ToggleableTable {...tableProps} />
           </>
         )}
       </>