Skip to content

Commit

Permalink
Merge pull request #2430 from carbon-design-system/2405-table-stories
Browse files Browse the repository at this point in the history
chore(table): clean up stories
  • Loading branch information
kodiakhq[bot] authored Jul 1, 2021
2 parents 5ac7edf + f0c4072 commit 39fb58d
Show file tree
Hide file tree
Showing 12 changed files with 105,703 additions and 341,921 deletions.
501 changes: 71 additions & 430 deletions packages/react/src/components/Table/StatefulTable.story.jsx

Large diffs are not rendered by default.

23 changes: 23 additions & 0 deletions packages/react/src/components/Table/Table.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -673,6 +673,7 @@ Advanced filtering is experimental and may be subject to change, so it's usage i
## Pagination

Pagination is controlled through the `options.hasPagingation` prop combined with the `view.pagination` prop. Pagination has one callback event for onChangePage that is fired when the page or the number of items per page changes.
By default, tables with pagination will expect the entire table data to be passed in on the `data` prop; the visible data for a page is calculated dynamically by the table based on the page size and page number. In the case where the table is rendering a large data set, the `options.hasOnlyPageData` prop can be used change this behavior. With `options.hasOnlyPageData = true`, the `data` prop will be expected to contain only the rows for the visible page.

```jsx
<Table
Expand All @@ -697,6 +698,28 @@ Pagination is controlled through the `options.hasPagingation` prop combined with
/>
```

```jsx
<Table
actions={{
pagination: {
onChangePage: ({ page, pageSize }) => {},
},
}}
options={{
hasPagination: true,
hasOnlyPageData: true,
}}
view={{
pagination: {
pageSize: 10,
pageSizes: [10, 20, 30],
page: 8267,
totalItems: 97532,
},
}}
/>
```

## Batch actions

You can combine batch actions with the `Table` component to allow the user
Expand Down
Loading

0 comments on commit 39fb58d

Please sign in to comment.