Skip to content

Update table-semantic.mdx #5291

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

Merged
chasestarr merged 1 commit into from
Jun 9, 2023
Merged

Update table-semantic.mdx #5291

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
31 changes: 23 additions & 8 deletions documentation-site/pages/components/table-semantic.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,20 +44,35 @@ For larger amounts of information, browser rendering performance can suffer and
you should use the virtualized scrolling features of the div-based
[table](/components/table) or [table-grid](/components/table-grid) components.

## Table vs. TableBuilder

If you want to pass some data in and let the component take care of rendering,
**Table** is the right component. If you want control over how each cell is
rendered, use **TableBuilder** along with **TableBuilderColumn**.

When using **TableBuilder**, you pass data in the same as you would with
**Table**, then you define how each cell (and it's header) should be rendered
by adding a **TableBuilderColumn** for each column. Each **TableBuilderColumn**
takes exactly one child, and that child is a function which a row of data as
input, and outputs a React Node which represents the cell for that column/row
pair. See the [table-builder](#table-builder) example below for a basic example,
and the following table-builder examples for more complex cases, including
customizing the column header.

## Examples

<Example title="Table basic usage" path="table-semantic/basic.tsx">
<Basic />
</Example>

<Example title="Common cell examples" path="table-semantic/cells.tsx">
<Cells />
</Example>

<Example title="Table with scrolling contents" path="table-semantic/scroll.tsx">
<Scroll />
</Example>

<Example title="Table with empty message" path="table-semantic/empty-message.tsx">
<EmptyMessage />
</Example>

<Example title="Table Builder" path="table-semantic/builder.tsx">
<Builder />
</Example>
Expand All @@ -74,12 +89,12 @@ you should use the virtualized scrolling features of the div-based
<Alternating />
</Example>

<Example title="Table custom with merged cells" path="table-semantic/span.tsx">
<Span />
<Example title="Common cell examples" path="table-semantic/cells.tsx">
<Cells />
</Example>

<Example title="Table with empty message" path="table-semantic/empty-message.tsx">
<EmptyMessage />
<Example title="Table custom with merged cells" path="table-semantic/span.tsx">
<Span />
</Example>

<Exports
Expand Down