docs(data-table): update datatable docs (#6430)

* docs(data-table): alex fixes

* chore(docs): remove alex comment

Co-authored-by: Josh Black <[email protected]>
Co-authored-by: Andrea N. Cardona <[email protected]>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

.alexrc

@@ -0,0 +1,3 @@
+{
+  "profanitySureness": 1
+}

packages/react/src/components/DataTable/README.md

@@ -1,11 +1,11 @@
 # `DataTable` component
 
-> A set of table primitives to help teams build simple, flexible, and WAI-ARIA
+> A set of table primitives to help teams build clear, flexible, and WAI-ARIA
 > compliant Tables in React
 
 ## Table of Contents
 
-<!-- To run doctoc, just do `npx doctoc README.md` in this directory! -->
+<!-- To run doctoc, type `npx doctoc README.md` in this directory! -->
 
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 
@@ -68,7 +68,7 @@ import { DataTable } from 'carbon-components-react';
 // De-structure `DataTable` directly to get local references
 const { Table, TableHead, TableHeader, TableBody, TableCell } = DataTable;
 
-// Or, just use them in your React projects by doing
+// Or use them in your React projects by doing
 <DataTable.Table />
 <DataTable.TableHead />
 <DataTable.TableHeader />
@@ -127,8 +127,8 @@ function App() {
 }
 ```
 
-In the example above, we can see that the `render` prop is just a function that
-has the following arguments:
+In the example above, we can see that the `render` prop is a function that has
+the following arguments:
 
 - `rows` which are the rows to be rendered inside of `TableBody`
 - `headers` which are the headers to be rendered inside of `TableHead`
@@ -277,7 +277,7 @@ default comparison methods better sort numeric inputs.
 
 The `render` prop is a function that you give to the `DataTable` component that
 takes in a variety of arguments and should ultimately return a valid React
-element, or component. This could be as simple or complex as the following
+element, or component. This could be as basic or complex as the following
 example:
 
 ```jsx
@@ -613,20 +613,16 @@ In practice, this looks like the following:
           <TableToolbarSearch onChange={onInputChange} />
           <TableToolbarMenu>
             <TableToolbarAction
-              icon={iconDownload}
-              iconDescription="Download"
-              onClick={action('TableToolbarAction - Download')}
-            />
-            <TableToolbarAction
-              icon={iconEdit}
-              iconDescription="Edit"
-              onClick={action('TableToolbarAction - Edit')}
-            />
-            <TableToolbarAction
-              icon={iconSettings}
-              iconDescription="Settings"
-              onClick={action('TableToolbarAction - Settings')}
-            />
+                onClick={action('TableToolbarAction - Download')}
+                primaryFocus>
+              <iconDownload> Download
+            </TableToolbarAction>
+            <TableToolbarAction onClick={action('TableToolbarAction - Edit')}>
+              <iconEdit> Edit
+            </TableToolbarAction>
+            <TableToolbarAction  onClick={action('TableToolbarAction - Settings')}>
+              <iconSettings> Settings
+            </TableToolbarAction>
           </TableToolbarMenu>
           <Button onClick={action('Add new row')} small kind="primary">
             Add new
@@ -712,20 +708,16 @@ In practice, this looks like the following:
           <TableToolbarSearch onChange={onInputChange} />
             <TableToolbarMenu>
               <TableToolbarAction
-                icon={iconDownload}
-                iconDescription="Download"
                 onClick={action('TableToolbarAction - Download')}
-              />
-              <TableToolbarAction
-                icon={iconEdit}
-                iconDescription="Edit"
-               onClick={action('TableToolbarAction - Edit')}
-              />
-              <TableToolbarAction
-                icon={iconSettings}
-                iconDescription="Settings"
-                onClick={action('TableToolbarAction - Settings')}
-              />
+                primaryFocus>
+                <iconDownload> Download
+              </TableToolbarAction>
+              <TableToolbarAction onClick={action('TableToolbarAction - Edit')}>
+                <iconEdit> Edit
+              </TableToolbarAction>
+              <TableToolbarAction  onClick={action('TableToolbarAction - Settings')}>
+                <iconSettings> Settings
+              </TableToolbarAction>
             </TableToolbarMenu>
           <Button onClick={action('Add new row')} small kind="primary">
             Add new