From 534b60febbc8e43b36ffb71a01c549e7c3a7ac08 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matuzal=C3=A9m=20Teles?= Date: Fri, 21 Feb 2025 18:48:43 -0600 Subject: [PATCH] docs(@clayui/table): adjust table sorting example --- packages/clay-core/docs/table.mdx | 55 +++++++++++++++++++++---------- 1 file changed, 38 insertions(+), 17 deletions(-) diff --git a/packages/clay-core/docs/table.mdx b/packages/clay-core/docs/table.mdx index 20ac248c75..692117ae1f 100644 --- a/packages/clay-core/docs/table.mdx +++ b/packages/clay-core/docs/table.mdx @@ -238,8 +238,13 @@ It is also possible to implement your own logic on the client side when your dat ```jsx preview -export function App() { - const [sort, setSort] = (useState < Sorting) | (null > null); +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'}, @@ -247,7 +252,7 @@ export function App() { const filteredItems = useMemo(() => { if (!sort) { - return; + return items; } return items.sort((a, b) => { @@ -265,21 +270,37 @@ export function App() { }, [sort, items]); return ( - - - - Name - - - Files - - - Type - - + +
+
+ + + Name + + + Files + + + Type + + - ... -
+ + {(row) => ( + + + + {row['name']} + + + {row['files']} + {row['type']} + + )} + + + + ); } ```