docs adjustments

Author: Lukas742

.storybook/components/DocsHeader.tsx

@@ -16,6 +16,7 @@ import {
 } from '@ui5/webcomponents-react';
 import { clsx } from 'clsx';
 import type { ComponentProps } from 'react';
+import { Fragment } from 'react';
 import { useGetSubComponentsOfModule } from '../utils';
 import classes from './DocsHeader.module.css';
 import { GitHubLogo } from './GitHub-Mark';
@@ -143,10 +144,10 @@ export const InfoTable = ({
             </th>
             <td data-import-cell={supportsClipboardApi}>
               {subComps.map((subComp) => (
-                <>
-                  <Import key={subComp} moduleName={subComp} componentId={preparedMeta.componentId} />
+                <Fragment key={subComp}>
+                  <Import moduleName={subComp} componentId={preparedMeta.componentId} />
                   <br />
-                </>
+                </Fragment>
               ))}
               {supportsClipboardApi && (
                 <Button

.storybook/manager.tsx

@@ -64,7 +64,7 @@ addons.setConfig({
       const isExperimental = tags.includes('experimental');
       const isDeprecated = tags.includes('deprecated');
 
-      if (item.type !== 'component' && item.type !== 'docs') {
+      if ((item.type !== 'component' && item.type !== 'docs') || (item.type === 'docs' && item.name === 'Docs')) {
         return item.name;
       }
 

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

@@ -607,13 +607,18 @@ export const NoData: Story = {
             }
           />
         ) : (
-          <ToggleableTable
-            {...args}
-            data={selected === 'data' ? args.data : []}
-            NoDataComponent={
-              selected === 'noData' ? undefined : () => <IllustratedMessage role="gridcell" name={NoDataIllustration} />
-            }
-          />
+          <>
+            <hr />
+            <ToggleableTable
+              {...args}
+              data={selected === 'data' ? args.data : []}
+              NoDataComponent={
+                selected === 'noData'
+                  ? undefined
+                  : () => <IllustratedMessage role="gridcell" name={NoDataIllustration} />
+              }
+            />
+          </>
         )}
       </>
     );

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

@@ -11,6 +11,7 @@ import { ImportStatement } from '@sb/components/Import';
 We're offering plugin hooks to extend the functionality of the `AnalyticalTable` component. The following hooks are available:
 
 - [useAnnounceEmptyCells](?path=/docs/data-display-analyticaltable-plugin-hooks-useannounceemptycells--docs)
+- [useF2CellEdit](?path=/docs/data-display-analyticaltable-plugin-hooks-usef2celledit--docs)
 - [useIndeterminateRowSelection](?path=/docs/data-display-analyticaltable-plugin-hooks-useindeterminaterowselection--docs)
 - [useManualRowSelect](?path=/docs/data-display-analyticaltable-plugin-hooks-usemanualrowselect--docs)
 - [useOnColumnResize](?path=/docs/data-display-analyticaltable-plugin-hooks-useoncolumnresize--docs)

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

@@ -1033,7 +1033,10 @@ export interface AnalyticalTablePropTypes extends Omit<CommonProps, 'title'> {
   /**
    * Component that will be rendered when the table is not loading and has no data.
    *
-   * __Note:__ Although this prop accepts all React components, it is strongly recommended that you use `IllustratedMessage` with `design="Auto"` to preserve the intended design.
+   * __Note:__
+   * - Although this prop accepts all React components, it is strongly recommended that you use `IllustratedMessage` with `design="Auto"` to preserve the intended design.
+   * - For `visibleRowCountMode`s "Auto" and "AutoWithEmptyRows", the `NoDataComponent` spreads to the available space below the header row, otherwise the `minRows` prop defines the minimum height of the table body.
+   * - To prevent overflow, ensure the table body is at least **60 px** tall when displaying an `IllustratedMessage`.
    *
    * @default DefaultNoDataComponent
    */