@public-ui/sample-react 4.3.1-rc.1 → 4.3.1-rc.4

package/src/components/table/column-alignment.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 
 import { KolHeading, KolTableStateful } from '@public-ui/react-v19';
 
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 const DATA = [{ left: 'Left Example', center: 'Center Example', right: 'Right Example' }];
@@ -14,7 +15,7 @@ export const TableColumnAlignment: FC = () => (
 			<p>This sample shows KolTableStateful with columns headers and data in different text alignments.</p>
 		</SampleDescription>
 
-		<section className="w-full flex flex-col">
+		<SampleBlock id="column-alignment" className="w-full flex flex-col" fitContent>
 			<KolHeading _label="Simple table" _level={3}></KolHeading>
 			<KolTableStateful
 				_label="Table for demonstration purposes with different text align properties"
@@ -83,6 +84,6 @@ export const TableColumnAlignment: FC = () => (
 				className="block"
 				style={{ maxWidth: '600px' }}
 			/>
-		</section>
+		</SampleBlock>
 	</>
 );

package/src/components/table/complex-headers.tsx

@@ -1,6 +1,7 @@
 import { KolTableStateful } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 export const TableComplexHeaders: FC = () => (
@@ -9,7 +10,7 @@ export const TableComplexHeaders: FC = () => (
 			<p>This sample shows KolTableStateful using vertical and horizontal headers, applying colspan and rowspan.</p>
 		</SampleDescription>
 
-		<section className="w-full flex flex-col">
+		<SampleBlock id="complex-headers" className="w-full flex flex-col">
 			<KolTableStateful
 				_label="Business hours"
 				_data={[
@@ -127,6 +128,6 @@ export const TableComplexHeaders: FC = () => (
 					],
 				}}
 			/>
-		</section>
+		</SampleBlock>
 	</>
 );

package/src/components/table/empty.tsx

@@ -0,0 +1,31 @@
+import type { KoliBriTableHeaders } from '@public-ui/components';
+import { KolTableStateful } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+const HEADERS_HORIZONTAL: KoliBriTableHeaders = {
+	horizontal: [
+		[
+			{ label: 'ID', key: 'id', textAlign: 'right', width: 160, sortDirection: 'NOS' },
+			{ label: 'Common name', key: 'common_name', textAlign: 'left', width: 160, sortDirection: 'NOS' },
+			{ label: 'Scientific name', key: 'scientific_name', textAlign: 'left', width: 160, sortDirection: 'NOS' },
+			{ label: 'Conservation status', key: 'conservation_status', textAlign: 'left', width: 160, sortDirection: 'NOS' },
+			{ label: 'Habitat', key: 'habitat', textAlign: 'left', width: 160, sortDirection: 'NOS' },
+			{ label: 'Diet', key: 'diet', textAlign: 'left', width: 160, sortDirection: 'NOS' },
+			{ label: 'Geographic range', key: 'geographic_range', textAlign: 'left', width: 160, sortDirection: 'NOS' },
+		],
+	],
+};
+
+export const TableEmpty: FC = () => {
+	return (
+		<>
+			<SampleDescription>
+				<p>This sample shows an empty KolTableStateful.</p>
+			</SampleDescription>
+
+			<KolTableStateful _label="Table for demonstration purposes" _headers={HEADERS_HORIZONTAL} _data={[]} />
+		</>
+	);
+};

package/src/components/table/horizontal-scrollbar.tsx

@@ -3,6 +3,7 @@ import React, { useState } from 'react';
 
 import { KolHeading, KolInputCheckbox, KolTableStateful } from '@public-ui/react-v19';
 
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 import { DATE_FORMATTER } from './formatter';
 import type { Data } from './test-data';
@@ -58,39 +59,43 @@ export const TableHorizontalScrollbar: FC = () => {
 				</p>
 			</SampleDescription>
 
-			<section className="w-full flex flex-col gap-4">
-				<div className="w-[400px] flex flex-col gap-4">
+			<div className="w-[400px] flex flex-col gap-4">
+				<SampleBlock id="scrollbar-horizontal" className="w-full flex flex-col gap-4">
 					<KolTableStateful
 						_label="Table for demonstration purposes with horizontal scrollbar."
 						_headers={hasWidthRestriction ? HEADERS : COMPACT_HEADERS}
 						_data={DATA}
 						className="block"
 					/>
-					<KolTableStateful _label="Table for demonstration horizontal scrolling with pagination." _headers={ORDER_HEADERS} _data={tableData} _pagination />
+				</SampleBlock>
+				<KolTableStateful _label="Table for demonstration horizontal scrolling with pagination." _headers={ORDER_HEADERS} _data={tableData} _pagination />
+				<SampleBlock id="scrollbar-horizontal-empty" className="w-full flex flex-col gap-4">
 					<KolTableStateful
 						_label="Table for demonstration purposes with horizontal scrollbar with auto width calculation."
 						_headers={hasWidthRestriction ? HEADERS : COMPACT_HEADERS}
 						_data={[]}
 						className="block"
 					/>
-				</div>
+				</SampleBlock>
+			</div>
 
-				<KolInputCheckbox
-					_checked={hasWidthRestriction}
-					_label="Toggle width restriction"
-					_variant="switch"
-					_on={{
-						onChange: (_event, value) => {
-							setHasWidthRestriction(Boolean(value));
-						},
-					}}
-				></KolInputCheckbox>
+			<KolInputCheckbox
+				_checked={hasWidthRestriction}
+				_label="Toggle width restriction"
+				_variant="switch"
+				_on={{
+					onChange: (_event, value) => {
+						setHasWidthRestriction(Boolean(value));
+					},
+				}}
+			></KolInputCheckbox>
 
-				<KolHeading _label="Same table without scrollbar" _level={2} className="block mt-4" />
-				<p className="mt-0">
-					<i>Scrollbar appears on very small viewport sizes</i>
-				</p>
+			<KolHeading _label="Same table without scrollbar" _level={2} className="block mt-4" />
+			<p className="mt-0">
+				<i>Scrollbar appears on very small viewport sizes</i>
+			</p>
 
+			<SampleBlock id="scrollbar-horizontal-large" className="w-full flex flex-col gap-4" skipSnapshot>
 				<KolTableStateful
 					_label="Table for demonstration purposes without horizontal scrollbar"
 					_headers={HEADERS}
@@ -98,7 +103,7 @@ export const TableHorizontalScrollbar: FC = () => {
 					className="block"
 					_pagination
 				/>
-			</section>
+			</SampleBlock>
 		</>
 	);
 };

package/src/components/table/multi-sort.tsx

@@ -2,7 +2,8 @@ import type { FC } from 'react';
 import React, { useState } from 'react';
 
 import type { KoliBriTableDataType, KoliBriTableHeaderCellWithLogic, KoliBriTableHeaders } from '@public-ui/components';
-import { KolButtonLink, KolHeading, KolTableStateful } from '@public-ui/react-v19';
+import { KolButtonLink, KolTableStateful } from '@public-ui/react-v19';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 const DATE_FORMATTER = Intl.DateTimeFormat('de-DE', {
@@ -125,8 +126,7 @@ export const MultiSortTable: FC = () => {
 			</SampleDescription>
 
 			<section className="w-full grid gap-6">
-				<section className="grid gap-4">
-					<KolHeading _level={2} _label="Vertical" />
+				<SampleBlock id="vertical" heading="Vertical">
 					<KolButtonLink _label="Reset Table" _on={{ onClick: () => setVerticalHeader({ vertical: [[...TABLE_HEADER_CELLS]] }) }}></KolButtonLink>
 					<KolTableStateful
 						_label="Sort Table with Order and Date"
@@ -135,12 +135,11 @@ export const MultiSortTable: FC = () => {
 						className="block"
 						_allowMultiSort={true}
 					/>
-				</section>
-				<section className="grid gap-4">
-					<KolHeading _level={2} _label="Horizontal" />
+				</SampleBlock>
+				<SampleBlock id="horizontal" heading="Horizontal">
 					<KolButtonLink _label="Reset Table" _on={{ onClick: () => setHorizontalHeader({ horizontal: [[...TABLE_HEADER_CELLS]] }) }}></KolButtonLink>
 					<KolTableStateful _label="Sort Table with Order and Date" _data={BACKLOG_DATA} _headers={horizontalHeader} className="block" _allowMultiSort={true} />
-				</section>
+				</SampleBlock>
 			</section>
 		</>
 	);

package/src/components/table/non-hidable-columns.tsx

@@ -1,6 +1,7 @@
 import { KolTableStateful } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 const DATA = [
@@ -14,21 +15,23 @@ export const TableNonHidableColumns: FC = () => (
 			<p>This example demonstrates a column that cannot be hidden in the settings.</p>
 		</SampleDescription>
 
-		<KolTableStateful
-			_label="Table with a non-hidable column"
-			_hasSettingsMenu
-			_headers={{
-				horizontal: [
-					[
-						{ key: 'id', label: 'ID', hidable: false, width: 160 },
-						{ key: 'name', label: 'Name', width: 160 },
-						{ key: 'age', label: 'Age', width: 160 },
+		<SampleBlock id="non-hidable" fitContent>
+			<KolTableStateful
+				_label="Table with a non-hidable column"
+				_hasSettingsMenu
+				_headers={{
+					horizontal: [
+						[
+							{ key: 'id', label: 'ID', hidable: false, width: 160 },
+							{ key: 'name', label: 'Name', width: 160 },
+							{ key: 'age', label: 'Age', width: 160 },
+						],
 					],
-				],
-			}}
-			_data={DATA}
-			className="block"
-			style={{ maxWidth: '600px' }}
-		/>
+				}}
+				_data={DATA}
+				className="block"
+				style={{ maxWidth: '600px' }}
+			/>
+		</SampleBlock>
 	</>
 );

package/src/components/table/pagination-position.tsx

@@ -1,8 +1,9 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolHeading, KolTableStateful } from '@public-ui/react-v19';
+import { KolTableStateful } from '@public-ui/react-v19';
 
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 import { DATE_FORMATTER } from './formatter';
 import type { Data } from './test-data';
@@ -26,8 +27,7 @@ export const PaginationPosition: FC = () => (
 		</SampleDescription>
 
 		<section className="w-full flex flex-col gap-14">
-			<section className="grid gap-4">
-				<KolHeading _level={2} _label="Table with pagination at the bottom."></KolHeading>
+			<SampleBlock id="bottom" heading="Table with pagination at the bottom.">
 				<KolTableStateful
 					_label="Sample table with pagination at the bottom"
 					_data={DATA}
@@ -44,9 +44,8 @@ export const PaginationPosition: FC = () => (
 					_paginationPosition="bottom"
 					_variant="small"
 				></KolTableStateful>
-			</section>
-			<section className="grid gap-4">
-				<KolHeading _level={2} _label="Table with pagination at the top."></KolHeading>
+			</SampleBlock>
+			<SampleBlock id="top" heading="Table with pagination at the top.">
 				<KolTableStateful
 					_label="Sample table with pagination at the top"
 					_data={DATA}
@@ -62,9 +61,8 @@ export const PaginationPosition: FC = () => (
 					}}
 					_paginationPosition="top"
 				></KolTableStateful>
-			</section>
-			<section className="grid gap-4">
-				<KolHeading _level={2} _label="Table with pagination at both top and bottom."></KolHeading>
+			</SampleBlock>
+			<SampleBlock id="both" heading="Table with pagination at both top and bottom.">
 				<KolTableStateful
 					_label="Sample table with pagination at both top and bottom"
 					_data={DATA}
@@ -80,7 +78,7 @@ export const PaginationPosition: FC = () => (
 					}}
 					_paginationPosition="both"
 				></KolTableStateful>
-			</section>
+			</SampleBlock>
 		</section>
 	</div>
 );

package/src/components/table/routes.ts

@@ -7,6 +7,7 @@ import { TableBig } from './big-table';
 import { TableColumnAlignment } from './column-alignment';
 import { TableComplexHeaders } from './complex-headers';
 import { TableDirectionAwareSort } from './direction-aware-sort';
+import { TableEmpty } from './empty';
 import { TableHighlightRow } from './highlight-row';
 import { TableHorizontalScrollbar } from './horizontal-scrollbar';
 import { InteractiveChildElements } from './interactive-child-elements';
@@ -17,6 +18,7 @@ import { PredefinedSettings } from './predefined-settings';
 import { TableRenderCell } from './render-cell';
 import { TableSettingsColumnOptions } from './settings-column-options';
 import { TableSortData } from './sort-data';
+import { TableStatefulAsync } from './stateful-async';
 import { TableStatefulExport } from './stateful-export';
 import { TableStatefulResetSort } from './stateful-reset-sort';
 import { TableStatefulSettingsPersistence } from './stateful-settings-persistence';
@@ -37,6 +39,7 @@ export const TABLE_ROUTES: Routes = {
 	table: {
 		'column-alignment': TableColumnAlignment,
 		'complex-headers': TableComplexHeaders,
+		empty: TableEmpty,
 		'horizontal-scrollbar': TableHorizontalScrollbar,
 		'interactive-child-elements': InteractiveChildElements,
 		'multi-sort': MultiSortTable,
@@ -50,6 +53,7 @@ export const TABLE_ROUTES: Routes = {
 		'settings-column-options': TableSettingsColumnOptions,
 		'sort-data': TableSortData,
 		'direction-aware-sort': TableDirectionAwareSort,
+		'stateful-async': TableStatefulAsync,
 		'stateful-export': TableStatefulExport,
 		'stateful-reset-sort': TableStatefulResetSort,
 		'stateful-settings-persistence': TableStatefulSettingsPersistence,

package/src/components/table/sort-data.tsx

@@ -2,7 +2,8 @@ import type { FC } from 'react';
 import React from 'react';
 
 import type { KoliBriTableDataType, KoliBriTableHeaders } from '@public-ui/components';
-import { KolHeading, KolTableStateful } from '@public-ui/react-v19';
+import { KolTableStateful } from '@public-ui/react-v19';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 import type { Data } from './test-data';
 import { DATA } from './test-data';
@@ -61,14 +62,12 @@ export const TableSortData: FC = () => (
 		</SampleDescription>
 
 		<section className="w-full grid gap-4">
-			<section className="grid gap-4">
-				<KolHeading _level={2} _label="Vertical headers" />
+			<SampleBlock id="vertical-headers" heading="Vertical headers">
 				<KolTableStateful _label="Sort a date column" _data={DATA.slice(0, 10)} _headers={HEADERS_VERTICAL} className="block" />
-			</section>
-			<section className="grid gap-4">
-				<KolHeading _level={2} _label="Horizontal headers" />
+			</SampleBlock>
+			<SampleBlock id="horizontal-headers" heading="Horizontal headers">
 				<KolTableStateful _label="Sort a date column" _data={DATA} _headers={HEADERS_HORIZONTAL} className="block" />
-			</section>
+			</SampleBlock>
 		</section>
 	</>
 );

package/src/components/table/stateful-async.tsx

@@ -0,0 +1,50 @@
+import type { KoliBriTableHeaders } from '@public-ui/components';
+import { KolTableStateful } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React, { useEffect, useState } from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+import type { ComplexData } from './test-complex-data';
+import { COMPLEX_DATA } from './test-complex-data';
+
+const HEADERS_HORIZONTAL: KoliBriTableHeaders = {
+	horizontal: [
+		[
+			{ label: 'ID', key: 'id', textAlign: 'right', width: 160, sortDirection: 'NOS' },
+			{ label: 'Common name', key: 'common_name', textAlign: 'left', width: 160, sortDirection: 'NOS' },
+			{ label: 'Scientific name', key: 'scientific_name', textAlign: 'left', width: 160, sortDirection: 'NOS' },
+			{ label: 'Conservation status', key: 'conservation_status', textAlign: 'left', width: 160, sortDirection: 'NOS' },
+			{ label: 'Habitat', key: 'habitat', textAlign: 'left', width: 160, sortDirection: 'NOS' },
+			{ label: 'Diet', key: 'diet', textAlign: 'left', width: 160, sortDirection: 'NOS' },
+			{ label: 'Geographic range', key: 'geographic_range', textAlign: 'left', width: 160, sortDirection: 'NOS' },
+		],
+	],
+};
+
+export const TableStatefulAsync: FC = () => {
+	const getAsyncData = () => new Promise<{ COMPLEX_DATA: ComplexData[] }>((resolve) => setTimeout(() => resolve({ COMPLEX_DATA }), 50000));
+	const loadData = () => {
+		setLoading(true);
+		getAsyncData().then((result: Awaited<ReturnType<typeof getAsyncData>>) => {
+			setComplexData(result.COMPLEX_DATA.slice(0, 15));
+			setLoading(false);
+		});
+	};
+
+	const [complexData, setComplexData] = useState<ComplexData[]>([]);
+	const [loading, setLoading] = useState<boolean>(true);
+
+	useEffect(() => loadData(), []);
+
+	return (
+		<>
+			<SampleDescription>
+				<p>This sample shows how KolTableStateful can load data async.</p>
+			</SampleDescription>
+
+			<section className="w-full relative">
+				<KolTableStateful _label="Table for demonstration purposes" _loading={loading} _headers={HEADERS_HORIZONTAL} _data={complexData} />
+			</section>
+		</>
+	);
+};

package/src/components/table/stateful-with-selection.tsx

@@ -3,6 +3,7 @@ import { KolTableStateful } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
 
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 import type { KoliBriTableHeaderCellWithLogic } from '@public-ui/components';
@@ -87,7 +88,7 @@ export const TableStatefulWithSelection: FC = () => {
 				</p>
 			</SampleDescription>
 
-			<section className="w-full">
+			<SampleBlock id="selection" className="w-full">
 				<KolTableStateful
 					_label="Tasks with action buttons"
 					_headers={HEADERS}
@@ -96,7 +97,7 @@ export const TableStatefulWithSelection: FC = () => {
 					_selection={selection}
 					_on={{ onSelectionChange: handleSelectionChangeCallback }}
 				/>
-			</section>
+			</SampleBlock>
 		</>
 	);
 };

package/src/components/table/stateful-with-single-selection.tsx

@@ -3,6 +3,7 @@ import { KolTableStateful } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
 
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 import type { KoliBriTableHeaderCellWithLogic } from '@public-ui/components';
@@ -88,7 +89,7 @@ export const TableStatefulWithSingleSelection: FC = () => {
 				</p>
 			</SampleDescription>
 
-			<section className="w-full">
+			<SampleBlock id="single-selection" className="w-full">
 				<KolTableStateful
 					_label="Tasks with action buttons"
 					_headers={HEADERS}
@@ -97,7 +98,7 @@ export const TableStatefulWithSingleSelection: FC = () => {
 					_selection={selection}
 					_on={{ onSelectionChange: handleSelectionChangeCallback }}
 				/>
-			</section>
+			</SampleBlock>
 		</>
 	);
 };

package/src/components/table/stateless-async-paging.tsx

@@ -1,7 +1,8 @@
 import type { KoliBriTableHeaders } from '@public-ui/components';
-import { KolPagination, KolSpin, KolTableStateless } from '@public-ui/react-v19';
+import { KolPagination, KolTableStateless } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React, { useEffect, useState } from 'react';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 import type { ComplexData } from './test-complex-data';
@@ -21,33 +22,10 @@ const HEADERS_HORIZONTAL: KoliBriTableHeaders = {
 	],
 };
 
-const LoadingOverlayFC: FC<{
-	label: string;
-	show: boolean;
-}> = ({ label, show }) => {
-	if (show) {
-		return (
-			<div className="loading-overlay">
-				<KolSpin
-					_label={label}
-					_show={show}
-					_variant="cycle"
-					style={{
-						backgroundColor: 'transparent',
-					}}
-				/>
-			</div>
-		);
-	} else {
-		return null;
-	}
-};
-
 export const TableStatelessAsync: FC = () => {
 	const getAsyncData = () => new Promise<{ COMPLEX_DATA: ComplexData[] }>((resolve) => setTimeout(() => resolve({ COMPLEX_DATA }), 5000));
-	const loadData = (action: 'sort' | 'paginate') => {
+	const loadData = () => {
 		setLoading(true);
-		setCurrentAction(action);
 		getAsyncData().then((result: Awaited<ReturnType<typeof getAsyncData>>) => {
 			setComplexData(result.COMPLEX_DATA.slice(0, 15));
 			setLoading(false);
@@ -56,9 +34,8 @@ export const TableStatelessAsync: FC = () => {
 
 	const [complexData, setComplexData] = useState<ComplexData[]>([]);
 	const [loading, setLoading] = useState<boolean>(true);
-	const [currentAction, setCurrentAction] = useState<'sort' | 'paginate'>('sort');
 
-	useEffect(() => loadData('sort'), []);
+	useEffect(() => loadData(), []);
 
 	return (
 		<>
@@ -69,13 +46,14 @@ export const TableStatelessAsync: FC = () => {
 				</p>
 			</SampleDescription>
 
-			<section className="w-full relative">
+			<SampleBlock id="async" className="w-full relative">
 				<KolTableStateless
 					_label="Table for demonstration purposes"
+					_loading={loading}
 					_headerCells={HEADERS_HORIZONTAL}
 					_data={complexData}
 					_on={{
-						onSort: () => loadData('sort'),
+						onSort: () => loadData(),
 					}}
 				/>
 				<KolPagination
@@ -85,11 +63,10 @@ export const TableStatelessAsync: FC = () => {
 					_boundaryCount={2}
 					_pageSize={15}
 					_on={{
-						onChangePage: () => loadData('paginate'),
+						onChangePage: () => loadData(),
 					}}
 				/>
-				<LoadingOverlayFC label={currentAction === 'sort' ? 'Table is being sorted...' : 'Page is loading...'} show={loading} />
-			</section>
+			</SampleBlock>
 		</>
 	);
 };

package/src/components/table/stateless-with-selection.tsx

@@ -4,6 +4,7 @@ import type { FC } from 'react';
 import React, { useEffect, useRef, useState } from 'react';
 import { useToasterService } from '../../hooks/useToasterService';
 import { getRoot } from '../../shares/react-roots';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 type SelectionValue = string | number;
@@ -72,7 +73,7 @@ export const TableStatelessWithSelection: FC = () => {
 				<p>This sample shows KolTableStateless with checkboxes for selection enabled.</p>
 			</SampleDescription>
 
-			<section className="w-full">
+			<SampleBlock id="selection" className="w-full">
 				<KolTableStateless
 					_label="Table with selection checkboxes"
 					_headerCells={{
@@ -91,7 +92,7 @@ export const TableStatelessWithSelection: FC = () => {
 					style={{ maxWidth: '600px' }}
 					ref={kolTableStatelessRef}
 				/>
-			</section>
+			</SampleBlock>
 		</>
 	);
 };

package/src/components/table/stateless-with-single-selection.tsx

@@ -4,6 +4,7 @@ import type { FC } from 'react';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useToasterService } from '../../hooks/useToasterService';
 import { getRoot } from '../../shares/react-roots';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 type SelectionValue = string | number;
@@ -72,7 +73,7 @@ export const TableStatelessWithSingleSelection: FC = () => {
 				<p>This sample shows KolTableStateless with checkboxes for selection enabled.</p>
 			</SampleDescription>
 
-			<section className="w-full">
+			<SampleBlock id="single-selection" className="w-full" fitContent>
 				<KolTableStateless
 					_label="Table with selection checkboxes"
 					_headerCells={{
@@ -91,7 +92,7 @@ export const TableStatelessWithSingleSelection: FC = () => {
 					style={{ maxWidth: '600px' }}
 					ref={kolTableStatelessRef}
 				/>
-			</section>
+			</SampleBlock>
 		</>
 	);
 };

package/src/components/table/stateless.tsx

@@ -1,6 +1,7 @@
 import { KolTableStateless } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
+import { SampleBlock } from '../SampleBlock';
 import { SampleDescription } from '../SampleDescription';
 
 const DATA = [{ left: 'Left Example', center: 'Center Example', right: 'Right Example' }, {}, {}, {}];
@@ -11,7 +12,7 @@ export const TableStateless: FC = () => (
 			<p>This sample shows how KolTableStateless can be used directly, with the KolTableStateful wrapper.</p>
 		</SampleDescription>
 
-		<section className="w-full">
+		<SampleBlock id="stateless" className="w-full" fitContent>
 			<KolTableStateless
 				_label="Table for demonstration purposes"
 				_headerCells={{
@@ -41,6 +42,6 @@ export const TableStateless: FC = () => (
 					},
 				}}
 			/>
-		</section>
+		</SampleBlock>
 	</>
 );