diff --git a/src/pages/components/data-table/usage.mdx b/src/pages/components/data-table/usage.mdx index 2e973558ee7..34655b0c5fc 100755 --- a/src/pages/components/data-table/usage.mdx +++ b/src/pages/components/data-table/usage.mdx @@ -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](/components/data-table/accessibility/) tab for more information. @@ -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. @@ -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. @@ -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. @@ -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). @@ -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. @@ -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. @@ -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.