From 38cde4638c64b8864995103d659a083bf88598f3 Mon Sep 17 00:00:00 2001 From: Patrick Yeo Date: Fri, 29 Mar 2024 14:45:47 -0700 Subject: [PATCH 1/2] docs(clayui.com): LPD-18963 Add warning about missing icons --- packages/clay-core/docs/table.mdx | 59 +++++++++++++++++++++++++++++++ 1 file changed, 59 insertions(+) diff --git a/packages/clay-core/docs/table.mdx b/packages/clay-core/docs/table.mdx index b22b676d8a..297c473eba 100644 --- a/packages/clay-core/docs/table.mdx +++ b/packages/clay-core/docs/table.mdx @@ -165,6 +165,65 @@ const filteredItems = useMemo(() => { ``` +
+ Warning + When implementing ClayTable from a React application, the icons may not render. + The + Application Provider + method will make the icons available for use. +
+ +```jsx +import {Provider} from '@clayui/core'; + +const spritemap = 'icons.svg'; + +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.sort((a, b) => { + let cmp = new Intl.Collator('en', {numeric: true}).compare( + a[sort.column], + b[sort.column] + ); + + if (sort.direction === 'descending') { + cmp *= -1; + } + + return cmp; + }); +}, [sort, items]) + + + + + + Name + + + Files + + + Type + + + + + ... + +
+ +``` + ### Asynchronous Most tables with sorting can have a lot of data and are paged so the sorting must happen on the server side instead of implementing the logic on the client side. You can achieve this level of implementation by composing using the [`useResource` hook](/docs/components/data-provider.html). From cf84a1b1314f81700d099e35cc1ac0e1039439c7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matuzal=C3=A9m=20Teles?= Date: Mon, 1 Apr 2024 15:09:30 -0500 Subject: [PATCH 2/2] docs(@clayui/core): update table docs --- packages/clay-core/docs/table.mdx | 109 ++++++++++++++---------------- 1 file changed, 50 insertions(+), 59 deletions(-) diff --git a/packages/clay-core/docs/table.mdx b/packages/clay-core/docs/table.mdx index 297c473eba..18fc5354c9 100644 --- a/packages/clay-core/docs/table.mdx +++ b/packages/clay-core/docs/table.mdx @@ -15,6 +15,7 @@ storybookPath: 'design-system-components-table--dynamic' - [Content](#content) - [Static](#static) - [Dynamic](#dynamic) +- [Icons](#icons) - [Sorting](#sorting) - [Asynchronous](#asynchronous) - [Nested row](#nested-row) @@ -107,6 +108,55 @@ Unlike static content, dynamic content is when the options can change during the ``` +## Icons + +
+ Warning + When implementing ClayTable from a React application, the icons may not render. + The + Application Provider + method will make the icons available for use. +
+ +```jsx +import {Provider} from '@clayui/core'; + +const spritemap = 'icons.svg'; + + + + + {(column) => {column.name}} + + + + {(row) => ( + + {row.name} + {row.type} + + )} + +
+; +``` + ## Sorting Column sorting is implemented OOTB so the developer doesn't need to worry about implementing the UI details but the developer still needs to add their filter layer since the component is data-agnostic and allows you to do this asynchronously, it is important, especially when your data is paged, that the filter must happen in the backend. @@ -165,65 +215,6 @@ const filteredItems = useMemo(() => { ``` -
- Warning - When implementing ClayTable from a React application, the icons may not render. - The - Application Provider - method will make the icons available for use. -
- -```jsx -import {Provider} from '@clayui/core'; - -const spritemap = 'icons.svg'; - -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.sort((a, b) => { - let cmp = new Intl.Collator('en', {numeric: true}).compare( - a[sort.column], - b[sort.column] - ); - - if (sort.direction === 'descending') { - cmp *= -1; - } - - return cmp; - }); -}, [sort, items]) - - - - - - Name - - - Files - - - Type - - - - - ... - -
- -``` - ### Asynchronous Most tables with sorting can have a lot of data and are paged so the sorting must happen on the server side instead of implementing the logic on the client side. You can achieve this level of implementation by composing using the [`useResource` hook](/docs/components/data-provider.html).