Skip to content

Commit

Permalink
docs(DataTable): Update documentation for DataTable expansion (carbon…
Browse files Browse the repository at this point in the history
…-design-system#2276)

- Update to reflect that no `TableCell` should be a child of `TableExpandedRow`
- Update to add `colSpan` property to the `TableExpandedRow` element
  • Loading branch information
varatep authored and emyarod committed Apr 26, 2019
1 parent b9743ef commit f7b8590
Showing 1 changed file with 5 additions and 6 deletions.
11 changes: 5 additions & 6 deletions src/components/DataTable/README.md
Expand Up @@ -418,11 +418,9 @@ In practice, the combination of these components looks like the following:
</TableExpandRow>
{/* toggle based off of if the row is expanded. If it is, render TableExpandedRow */}
{row.isExpanded && (
<TableExpandedRow>
<TableCell colSpan={headers.length + 1}>
<h1>Expandable row content</h1>
<p>Description here</p>
</TableCell>
<TableExpandedRow colSpan={headers.length + 1}>
<h1>Expandable row content</h1>
<p>Description here</p>
</TableExpandedRow>
)}
</React.Fragment>
Expand All @@ -440,7 +438,8 @@ Some things to note:
- `TableExpandRow` is what you use instead of `TableRow` for the content of your row. We make sure to add `getRowProps` so that it has the right props
- `row.isExpanded` is the field available on `row` to know if the `row` is expanded or not
- `TableExpandedRow` is used as a wrapper for any content you want to appear in the expanded row
- Tip: the `colSpan` attribute on the `TableCell` should be `headers.length + 1` in order to span the whole table
- Tip: the `colSpan` attribute on the `TableExpandedRow` should be `headers.length + 1` in order to span the whole table
- `TableExpandedRow` should not have a `TableCell` child

#### Programmatic expansion

Expand Down

0 comments on commit f7b8590

Please sign in to comment.