Merge pull request #5939 from SelenaAungst/LPD-47018-2

docs(@clayui/table): Add code example of table-nested-rows
liferay · Feb 22, 2025 · 89df976 · 89df976
2 parents 1df746f + 534b60f
commit 89df976
Show file tree

Hide file tree

Showing 2 changed files with 517 additions and 18 deletions.
diff --git a/packages/clay-core/docs/table.mdx b/packages/clay-core/docs/table.mdx
@@ -237,17 +237,22 @@ It is also possible to implement your own logic on the client side when your dat
 	</code> API defined.
 </div>
 
-```jsx
-export function App() {
-	const [sort, setSort] = (useState < Sorting) | (null > null);
+```jsx preview
+import React, {useMemo, useState} from 'react';
+import {Body, Cell, Text, Head, Row, Table, Provider} from '@clayui/core';
+
+import '@clayui/css/lib/css/atlas.css';
+
+export default function App() {
+	const [sort, setSort] = useState(null);
 	const [items, setItems] = useState([
 		{files: 22, id: 1, name: 'Games', type: 'File folder'},
 		{files: 7, id: 2, name: 'Program Files', type: 'File folder'},
 	]);
 
 	const filteredItems = useMemo(() => {
 		if (!sort) {
-			return;
+			return items;
 		}
 
 		return items.sort((a, b) => {
@@ -265,21 +270,37 @@ export function App() {
 	}, [sort, items]);
 
 	return (
-		<Table onSortChange={setSort} sort={sort}>
-			<Head>
-				<Cell key="name" sortable>
-					Name
-				</Cell>
-				<Cell key="files" sortable>
-					Files
-				</Cell>
-				<Cell key="type" sortable>
-					Type
-				</Cell>
-			</Head>
+		<Provider spritemap="/public/icons.svg">
+			<div className="p-4">
+				<Table onSortChange={setSort} sort={sort}>
+					<Head>
+						<Cell key="name" sortable>
+							Name
+						</Cell>
+						<Cell key="files" sortable>
+							Files
+						</Cell>
+						<Cell key="type" sortable>
+							Type
+						</Cell>
+					</Head>
 
-			<Body defaultItems={filteredItems}>...</Body>
-		</Table>
+					<Body defaultItems={filteredItems}>
+						{(row) => (
+							<Row>
+								<Cell>
+									<Text size={3} weight="semi-bold">
+										{row['name']}
+									</Text>
+								</Cell>
+								<Cell>{row['files']}</Cell>
+								<Cell>{row['type']}</Cell>
+							</Row>
+						)}
+					</Body>
+				</Table>
+			</div>
+		</Provider>
 	);
 }
 ```