Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs(clayui.com): LPD-18963 Add warning about missing icons #5792

Merged
merged 2 commits into from
Apr 1, 2024
Merged

docs(clayui.com): LPD-18963 Add warning about missing icons #5792

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
38cde46
docs(clayui.com): LPD-18963 Add warning about missing icons
pat270 Mar 29, 2024
cf84a1b
docs(@clayui/core): update table docs
matuzalemsteles Apr 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 50 additions & 0 deletions packages/clay-core/docs/table.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -107,6 +108,55 @@ Unlike static content, dynamic content is when the options can change during the
</Table>
```

## Icons

<div class="clay-site-alert alert alert-warning">
<strong class="lead">Warning</strong>
When implementing ClayTable from a React application, the icons may not render.
The <a href="https://clayui.com/docs/components/provider.html#application-provider">
Application Provider
</a> method will make the icons available for use.
</div>

```jsx
import {Provider} from '@clayui/core';

const spritemap = 'icons.svg';

<Provider spritemap={spritemap}>
<Table>
<Head
items={[
{
id: '1',
name: 'Name',
},
{
id: '2',
name: 'Type',
},
]}
>
{(column) => <Cell key={column.id}>{column.name}</Cell>}
</Head>

<Body
defaultItems={[
{id: 1, name: 'Games', type: 'File folder'},
{id: 2, name: 'Program Files', type: 'File folder'},
]}
>
{(row) => (
<Row>
<Cell>{row.name}</Cell>
<Cell>{row.type}</Cell>
</Row>
)}
</Body>
</Table>
</Provider>;
```

## 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.
Expand Down
Loading