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.

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

Copy edits for data-table usage content #4312

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open
Changes from all commits
Commits
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
61 changes: 31 additions & 30 deletions src/pages/components/data-table/usage.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -429,16 +429,16 @@ The expandable icon always appears first and to the left of the selection icon.

### Interactions

The data table’s toolbar and rows follow interaction conventions found in other
Carbon components. Buttons, checkboxes, radio buttons, overflow menus, search,
and expanding elements are used in the data table, and all behave accordingly to
their guidelines.
The data table’s toolbar and rows follow interaction conventions that are found
in other Carbon components. Buttons, checkboxes, radio buttons, overflow menus,
search, and expanding elements are used in the data table, and all behave
according to their guidelines.

#### Mouse

Users can trigger an action or function in the table by clicking the associated
button or component. Each action or function has its own distinct click target.
See the accessibility tab for additional interactive guidance.
See the Accessibility tab for more information.

<Row>
<Column colLg={12}>
Expand Down Expand Up @@ -466,13 +466,12 @@ interactive.

### Pagination

Pagination divides table data into separate pages. Simple pagination indicates
the current page in view and offers controls to incrementally navigate to the
previous or next page. Advanced pagination is accompanied by an option that
enables the user to change the number of items per page and to jump to a
specific page number. The pagination component is always placed at the bottom of
the data table. See the [pagination](/components/pagination/usage) component for
further guidelines and configurations.
Pagination divides a data table into separate pages. Simple pagination indicates
the current page in view and offers controls to go to the previous or next page.
Advanced pagination is accompanied by an option that enables the user to change
the number of items per page and to jump to a specific page number. The
pagination component is always placed at the bottom of the data table. For more
information, see the [pagination](/components/pagination/usage) component.

<Row>
<Column colLg={12}>
Expand All @@ -487,10 +486,10 @@ further guidelines and configurations.
### Table toolbar

The table toolbar is reserved for global table actions such as table settings,
complex filters, exporting or editing table data. Actions in the toolbar can use
primary, ghost, or icon-only buttons. We recommend showing at most five actions
within the table toolbar. Additional actions can be made available through an
overflow menu, combo button, or similar components.
complex filters, exporting, or editing table data. Actions in the toolbar can
use primary, ghost, or icon-only buttons. Include up to five actions within the
table toolbar. More actions can be made available through an overflow menu,
combo button, or similar components.

<Row>
<Column colLg={8}>
Expand All @@ -505,9 +504,9 @@ overflow menu, combo button, or similar components.
#### Collapsed search

A search field can be triggered through an icon button in the data table
toolbar. By default the search functionality follows the
[active search](/patterns/search-pattern/#active-search) pattern. The search
should be closed by default, and placed below the table title.
toolbar. By default search follows the
[active search](/patterns/search-pattern/#active-search) pattern. The search is
closed by default, and placed below the table title.

<Row>

Expand Down Expand Up @@ -540,13 +539,13 @@ the actions on the right.

Columns can be sorted in ascending or descending order. Sorting controls are
located in the column headers and indicated with an arrow icon on hover and when
a column has been sorted.
a column is sorted.

A sorted data table has three states: unsorted (`arrows`), sorted-up
(`arrow--up`) or sorted-down (`arrow--down`). The icon indicates the current
sorted state and is only shown if sorting is activated. Only the column being
sorted should display an icon, and unsorted icons are only visible on hover. You
can see a demo of table sorting in
sorted state and is shown only when the sorting is activated. Only the sorted
column displays an icon, and unsorted icons are only visible on hover. You can
see a demo of sorting in
Carbon’s [React Storybook](https://react.carbondesignsystem.com/?path=/story/components-datatable-sorting--default).

<Row>
Expand Down Expand Up @@ -579,14 +578,14 @@ right of the bar or deselect all items.

### Inline actions

Inline actions are functions that may be performed on a specific table row. Each
row is accompanied by
Inline actions are functions that might be performed on a specific table row.
Each row is accompanied by
an [overflow menu](https://www.carbondesignsystem.com/components/overflow-menu/code) that
contains actions related specifically to that row.
contains actions that are related specifically to that row.

When the overflow menu contains fewer than three options, keep the actions
inline as icon buttons instead. This reduces a click and makes available actions
visible at a glance.
inline as icon buttons instead. This approach reduces a click and makes
available actions visible at a glance.

<Row>
<Column colLg={8}>
Expand Down Expand Up @@ -620,7 +619,7 @@ supports hover-over and persist the overflow menus even if the

### Loading

If additional load time is expected to display information, use skeleton states
If extra load time is expected to display information, use skeleton states
instead of spinners.

<Row>
Expand All @@ -635,7 +634,9 @@ instead of spinners.

## Modifiers

The data table features a zebra stripes modifier that styles the table rows with
### Alernating row color

The data table can use a zebra stripes modifier to style the table rows with
alternating colors to make scanning horizontal information easier for the user.

<Row>
Expand Down
Loading