@workday/canvas-kit-docs 11.0.0-alpha.707-next.0 → 11.0.0-alpha.708-next.0

package/dist/es6/mdx/versionsTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"versionsTable.d.ts","sourceRoot":"","sources":["../../../mdx/versionsTable.tsx"],"names":[],"mappings":"AA6DA,eAAO,MAAM,YAAY,mBAgCxB,CAAC"}
+{"version":3,"file":"versionsTable.d.ts","sourceRoot":"","sources":["../../../mdx/versionsTable.tsx"],"names":[],"mappings":"AA8DA,eAAO,MAAM,YAAY,mBAgCxB,CAAC"}

package/dist/es6/mdx/versionsTable.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Table, StatusIndicator } from '@workday/canvas-kit-preview-react';
+import { Table } from '@workday/canvas-kit-react';
+import { StatusIndicator } from '@workday/canvas-kit-preview-react';
 // @ts-ignore: Cannot find module error
 import { version } from '../../../lerna.json';
 // When we release a new version, add the support version before the first item.

package/dist/mdx/11.0-UPGRADE-GUIDE.mdx

@@ -1,4 +1,4 @@
-import {Table} from '@workday/canvas-kit-preview-react';
+import {Table} from '@workday/canvas-kit-react/table';
 import {base, brand} from '@workday/canvas-tokens-web';
 import {cssVar} from '@workday/canvas-kit-styling';
 
@@ -10,6 +10,8 @@ This guide contains an overview of the changes in Canvas Kit v11. Please
 any questions.
 
 - [Codemod](#codemod)
+- [Component Promotions](#component-promotions)
+  - [Table](#table)
 - [Deprecations](#deprecations)
   - [Form Field (Main)](#form-field-main)
   - [Label Text](#label-text)
@@ -25,6 +27,11 @@ any questions.
   - [Switch](#switch)
   - [Table (Preview)](#table-preview)
   - [Text](#text)
+- [Glossary](#glossary)
+  - [Main](#main)
+  - [Preview](#preview)
+  - [Labs](#labs)
+
 
 ## Codemod
 
@@ -87,6 +94,65 @@ finished.
 > the codemod, as its resulting formatting (spacing, quotes, etc.) may not match your project
 > conventions.
 
+## Component Promotions
+
+### Table
+
+**PR:** [#2600](https://github.com/Workday/canvas-kit/pull/2600)
+
+We've promoted the `Table` compound component in [Preview](#preview) to [Main](#main). This replaces the existing `Table` component with a compound component
+and will consist of a new compound component API.
+
+> `rowState` prop is no longer a part of the `Table` component.
+
+In v10, the `Table` component in [Main](#main) only exposed a `Table`  and `TableRow` component to build tables.
+
+In v11, `Table` now exposes every subcomponent of a semantic HTML
+[Table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table). While more verbose, it provides more flexibility for customization.
+
+See below for examples of the differences between the v10 `Table` and the v11 `Table` compound component.
+
+
+v10:
+
+```tsx
+<Table>
+	<thead>
+		<TableRow header={true}>
+			<th>Header Text</th>
+		</TableRow>
+	</thead>
+	<tbody>
+		<TableRow>
+			<td>Cell Text</td>
+		</TableRow>
+	</tbody>
+</Table>
+```
+
+v11:
+
+```tsx
+<Table>
+	<Table.Head>
+		<Table.Row>
+			<Table.Header>Header Text</Table.Header>
+		</Table.Row>
+	</Table.Head>
+	<Table.Body>
+		<Table.Row>
+			<Table.Cell>Cell Text</Table.Cell>
+		</Table.Row>
+	</Table.Body>
+</Table>
+```
+
+
+Please refer to the [Table examples](https://workday.github.io/canvas-kit/?path=/story/components-containers-table--basic) for how
+to implement new tables.
+
+> **NOTE:** If you were using the [Preview](#preview) `Table` compound component, then you will need to update your import from `"@workday/canvas-kit-preview-react/table"` to `"@workday/canvas-kit-react/table"`.
+
 ## Deprecations
 
 We add the [@deprecated](https://jsdoc.app/tags-deprecated.html) JSDoc tag to code we plan to remove
@@ -456,4 +522,46 @@ identically as it did in previous versions.
 and [tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs). It no
 longer extends the `Box` component, however, it still supports Emotion `styled` and style props.
 Type level components: `Title`, `Heading`, `BodyText` and `Subtext`, have not been changed since
-they extend the `Text` component. These changes do not affect the components API.
+they extend the `Text` component. These changes do not affect the components API.
+
+## Glossary
+
+### Main
+
+Our Main package of Canvas Kit tokens, components, and utilities at `@workday/canvas-kit-react` has
+undergone a full design and a11y review and is approved for use in product.
+
+Breaking changes to code in Main will only occur during major version updates and will always be
+communicated in advance and accompanied by migration strategies.
+
+---
+
+### Preview
+
+Our Preview package of Canvas Kit tokens, components, and utilities at
+`@workday/canvas-kit-preview-react` has undergone a full design and a11y review and is approved for
+use in product, but may not be up to the high code standards upheld in the [Main](#main) package.
+Preview is analagous to code in beta.
+
+Breaking changes are unlikely, but possible, and can be deployed to Preview at any time without
+triggering a major version update, though such changes will be communicated in advance and
+accompanied by migration strategies.
+
+Generally speaking, our goal is to eventually promote code from Preview to [Main](#main).
+Occasionally, a component with the same name will exist in both [Main](#main) and Preview (for
+example, see Segmented Control in [Preview](/components/buttons/segmented-control/) and
+[Main](https://d2krrudi3mmzzw.cloudfront.net/v8/?path=/docs/components-buttons-segmented-control--basic)).
+In these cases, Preview serves as a staging ground for an improved version of the component with a
+different API. The component in [Main](#main) will eventually be replaced with the one in Preview.
+
+---
+
+### Labs
+
+Our Labs package of Canvas Kit tokens, components, and utilities at `@workday/canvas-kit-labs-react`
+has **not** undergone a full design and a11y review. Labs serves as an incubator space for new and
+experimental code and is analagous to code in alpha.
+
+Breaking changes can be deployed to Labs at any time without triggering a major version update and
+may not be subject to the same rigor in communcation and migration strategies reserved for breaking
+changes in [Preview](#preview) and [Main](#main).

package/dist/mdx/{preview-react → react}/_examples/TablesAdvanced.mdx

@@ -1,4 +1,4 @@
-import {Table} from '@workday/canvas-kit-preview-react/table';
+import {Table} from '@workday/canvas-kit-react/table';
 
 import SelectableRows from './examples/Table/WithSelectableRows';
 import ExpandableRows from './examples/Table/WithExpandableRows';

package/dist/mdx/{preview-react → react}/_examples/examples/Table/WithExpandableRows.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
-import {Table} from '@workday/canvas-kit-preview-react/table';
+import {Table} from '@workday/canvas-kit-react/table';
 import {TertiaryButton} from '@workday/canvas-kit-react/button';
 import {createComponent, generateUniqueId} from '@workday/canvas-kit-react/common';
 import {Heading, Subtext} from '@workday/canvas-kit-react/text';

package/dist/mdx/{preview-react → react}/_examples/examples/Table/WithSelectableRows.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {Table} from '@workday/canvas-kit-preview-react/table';
+import {Table} from '@workday/canvas-kit-react/table';
 import {Heading} from '@workday/canvas-kit-react/text';
 import {Checkbox} from '@workday/canvas-kit-react/checkbox';
 import {createComponent, generateUniqueId} from '@workday/canvas-kit-react/common';

package/dist/mdx/{preview-react → react}/_examples/examples/Table/WithSortableColumnHeaders.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {Table} from '@workday/canvas-kit-preview-react/table';
+import {Table} from '@workday/canvas-kit-react/table';
 import {Tooltip} from '@workday/canvas-kit-react/tooltip';
 import {TertiaryButton} from '@workday/canvas-kit-react/button';
 import {Text} from '@workday/canvas-kit-react/text';

package/dist/mdx/react/table/Table.mdx

@@ -1,24 +1,18 @@
 import {SymbolDoc} from '@workday/canvas-kit-docs';
-
-import {Table, TableRow} from '@workday/canvas-kit-react/table';
-import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
-
+import {Table} from '@workday/canvas-kit-react/table';
+// Examples
 import Basic from './examples/Basic';
-import RowHeader from './examples/RowHeader';
-import RowStates from './examples/RowStates';
+import BasicWithHeading from './examples/BasicWithHeading';
+import FixedColumn from './examples/FixedColumn';
+import RightToLeft from './examples/RightToLeft';
 
 
 # Canvas Kit Table
 
-<StatusIndicator variant="red">
-  <StatusIndicator.Label>Deprecated</StatusIndicator.Label>
-</StatusIndicator>
-
-`Table` has been deprecated and will be removed in a future major version. Please use [`Table`](https://workday.github.io/canvas-kit/?path=/docs/preview-table--basic) in Preview instead.
-
-Tables are an efficient way of displaying sets of repeating data with the same structure.
-
-[> Workday Design Reference](https://design.workday.com/components/containers/tables)
+`Table` is a simple styled compound component that renders a
+[table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) element. It is used to
+present information in a two-dimensional table comprised of rows and columns of cells containing
+data.
 
 ## Installation
 
@@ -30,76 +24,43 @@ yarn add @workday/canvas-kit-react
 
 ### Basic Example
 
-Table includes a container `Table` component and a `TableRow` component. `Table` is a simple wrapper
-of the `<table>` element with Canvas styles. `TableRow` wraps `<tr>` and supports additional props
-to customize the style of the row.
+Users may not want to use a `caption` so they can import [Heading](/components/text/heading/) or
+[Text](/components/text/text/) instead. This will give the user more flexibility around the
+customization of the title/heading of their table.
 
-Use `Table` and `TableRow` in conjunction with the standard `<thead>` and `<tbody>` elements to
-create your Table.
+<ExampleCodeBlock code={BasicWithHeading} />
 
-<ExampleCodeBlock code={Basic} />
+### Right to Left
 
-## Component API
-
-### Table
-
-`Table` is a simple wrapper of the `<table>` element with Canvas styles. Use it as you would a
-standard `<table>` element.
-
-```tsx
-<Table>
-  <thead>
-    <TableRow header={true}>
-      <th>ID</th>
-      <th>Name</th>
-      ...
-    </TableRow>
-  </thead>
-  <tbody>
-    <TableRow>
-      <td>1</td>
-      <td>Aidan Brown</td>
-      ...
-    </TableRow>
-    ...
-  </tbody>
-</Table>
-```
+Table supports right-to-left languages when specified in the CanvasProvider theme.
 
-#### Props
+<ExampleCodeBlock code={RightToLeft} />
 
-`Table` does not have any documented props. Undocumented props are spread to its underlying
-`<table>` element.
+### Example with Caption
 
-### TableRow
+Users are free to use a `caption` instead of a heading. A `caption` is not required but it is good
+for
+[accessibility](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table#accessibility_concerns)
+purposes.
 
-`TableRow` wraps `<tr>` and supports additional props to customize the style of the row. Use it as
-you would a standard `<tr>` element.
+<ExampleCodeBlock code={Basic} />
 
-Set the `header` prop of the `TableRow` to designate whether or not it contains header elements.
+### Fixed Column
 
-<ExampleCodeBlock code={RowHeader} />
+Users may add styles to the `Table.Header` to render a fixed column. The example below assigns a
+`width` to the `Table` to guarantee the fixed column is triggered, but you are free to omit the
+`width` if you would only like the fixed column to be triggered if necessary.
 
-Set the `state` prop of the `TableRow` to display it using one of several different visual states.
-`state` accepts the following values:
+<ExampleCodeBlock code={FixedColumn} />
 
-- `TableRow.State.Selected`
-- `TableRow.State.Alert`
-- `TableRow.State.InputAlert`
-- `TableRow.State.Error`
-- `TableRow.State.InputError`
+### Advanced
 
-| State                       | Purpose                                                                |
-| --------------------------- | ---------------------------------------------------------------------- |
-| `TableRow.State.Alert`      | When there is an issue with the entire row as a whole.                 |
-| `TableRow.State.InputAlert` | When there are issues with one or more (but not all) cells in the row. |
-| `TableRow.State.Error`      | When there is an error with the entire row as a whole.                 |
-| `TableRow.State.InputError` | When there are errors with one or more (but not all) cells in the row. |
-| `TableRow.State.Selected`   | Indicates the selected row to the user.                                |
+You can also find several advanced Table examples in our Storybook Examples section.
 
-<ExampleCodeBlock code={RowStates} />
+- [Expandable Rows](/docs/examples-tables-advanced--expandable-rows)
+- [Selectable Rows ](/docs/examples-tables-advanced--selectable-rows)
+- [Sortable Column Headers](/docs/examples-tables-advanced--sortable-column-headers)
 
-`InputAlert` and `InputError` are identical to the `Alert` and `Error` states, respectively, except
-they lack a darkened border around the row.
+## Component API
 
-<SymbolDoc name="TableRow" fileName="/react/" />
+<SymbolDoc name="Table" fileName="/react/" />

package/dist/mdx/react/table/examples/Basic.tsx

@@ -1,35 +1,40 @@
 import React from 'react';
-import {Table, TableRow} from '@workday/canvas-kit-react/table';
 
-const columns = ['ID', 'Name', 'Position', 'Location'];
-
-const rows = [
-  [1, 'Aidan Brown', 'Product Manager', 'San Francisco, CA'],
-  [2, 'Betty Chen', 'Product Designer', 'San Francisco, CA'],
-  [3, 'Helen Gonzalez', 'Application Developer', 'Portland, OR'],
-  [4, 'Timothy May', 'VP, Product Development', 'San Francisco, CA'],
-  [5, 'John Hours', 'Product Manager', 'New York, New York'],
-];
+import {Table} from '@workday/canvas-kit-react/table';
 
 export default () => {
   return (
     <Table>
-      <thead>
-        <TableRow header={true}>
-          {columns.map((col, i) => (
-            <th key={i}>{col}</th>
-          ))}
-        </TableRow>
-      </thead>
-      <tbody>
-        {rows.map((row, i) => (
-          <TableRow key={i}>
-            {row.map((cell, j) => (
-              <td key={j}>{cell}</td>
-            ))}
-          </TableRow>
-        ))}
-      </tbody>
+      <Table.Caption>Coffee Drinks and Sizes</Table.Caption>
+      <Table.Head>
+        <Table.Row>
+          <Table.Header scope="col" backgroundColor="soap100">
+            Drink
+          </Table.Header>
+          <Table.Header scope="col" backgroundColor="soap100">
+            Size
+          </Table.Header>
+        </Table.Row>
+      </Table.Head>
+      <Table.Body>
+        <Table.Row>
+          <Table.Cell>Espresso</Table.Cell>
+          <Table.Cell>1 oz</Table.Cell>
+        </Table.Row>
+        <Table.Row>
+          <Table.Cell>Macchiato</Table.Cell>
+          <Table.Cell>2 oz Espresso</Table.Cell>
+        </Table.Row>
+        <Table.Row>
+          <Table.Cell>Cortado</Table.Cell>
+          <Table.Cell>2 oz Espresso, 1 oz Foamed Milk</Table.Cell>
+        </Table.Row>
+        <Table.Row></Table.Row>
+        <Table.Row>
+          <Table.Cell>Cappuccino</Table.Cell>
+          <Table.Cell>2 oz Espresso, 2 oz Foamed Milk, 2 oz Steamed Milk</Table.Cell>
+        </Table.Row>
+      </Table.Body>
     </Table>
   );
 };

package/dist/mdx/{preview-react → react}/table/examples/BasicWithHeading.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 
-import {Table} from '@workday/canvas-kit-preview-react/table';
+import {Table} from '@workday/canvas-kit-react/table';
 import {Heading} from '@workday/canvas-kit-react/text';
 import {useUniqueId} from '@workday/canvas-kit-react/common';
 
 export default () => {
   const headingID = useUniqueId();
-  
+
   return (
     <>
       <Heading as="h3" id={headingID} size="small" marginBottom="s">
@@ -15,8 +15,12 @@ export default () => {
       <Table aria-labelledby={headingID}>
         <Table.Head>
           <Table.Row>
-            <Table.Header scope="col" backgroundColor="soap100">Toppings</Table.Header>
-            <Table.Header scope="col" backgroundColor="soap100">Amount</Table.Header>
+            <Table.Header scope="col" backgroundColor="soap100">
+              Toppings
+            </Table.Header>
+            <Table.Header scope="col" backgroundColor="soap100">
+              Amount
+            </Table.Header>
           </Table.Row>
         </Table.Head>
         <Table.Body>

package/dist/mdx/{preview-react → react}/table/examples/FixedColumn.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {Table} from '@workday/canvas-kit-preview-react/table';
+import {Table} from '@workday/canvas-kit-react/table';
 import {Heading} from '@workday/canvas-kit-react/text';
 import {colors} from '@workday/canvas-kit-react/tokens';
 import {useUniqueId} from '@workday/canvas-kit-react/common';

package/dist/mdx/{preview-react → react}/table/examples/RightToLeft.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {Table} from '@workday/canvas-kit-preview-react/table';
+import {Table} from '@workday/canvas-kit-react/table';
 import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
 
 export default () => {

package/lib/Specifications.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable no-param-reassign */
 import React from 'react';
 import {toId} from '@storybook/csf';
-import {Table, TableRow} from '@workday/canvas-kit-react/table';
+import {Table} from '@workday/canvas-kit-react/table';
 import {Hyperlink} from '@workday/canvas-kit-react/button';
 
 import {specifications, SpecDescribe, SpecIt} from './specs';
@@ -85,35 +85,37 @@ export const Specifications = ({file, name}: SpecificationsProps) => {
 
     const [, first, kind, name, last] = matches;
 
-    return <>
-      {first.replace(/given /i, '')}
-      <Hyperlink
-        href={`${storybookBaseUrl}?path=/story/${toId(
-          kind,
-          name.replace('DefaultStory', 'Default Story')
-        )}`}
-      >
-        {name.replace('DefaultStory', 'Default')}
-      </Hyperlink>
-      {last}
-    </>;
+    return (
+      <>
+        {first.replace(/given /i, '')}
+        <Hyperlink
+          href={`${storybookBaseUrl}?path=/story/${toId(
+            kind,
+            name.replace('DefaultStory', 'Default Story')
+          )}`}
+        >
+          {name.replace('DefaultStory', 'Default')}
+        </Hyperlink>
+        {last}
+      </>
+    );
   };
 
   return block.type === 'describe' ? (
     <>
       <Table>
-        <thead>
-          <TableRow header={true}>
-            <th>Given</th>
-            <th>When</th>
-            <th>Then</th>
-          </TableRow>
-        </thead>
-        <tbody>
+        <Table.Head>
+          <Table.Row>
+            <Table.Header>Given</Table.Header>
+            <Table.Header>When</Table.Header>
+            <Table.Header>Then</Table.Header>
+          </Table.Row>
+        </Table.Head>
+        <Table.Body>
           {block.children.reduce(createTableRows, []).map((row, index) => (
-            <TableRow key={index}>
-              <td>{renderGiven(row.given[0])}</td>
-              <td>
+            <Table.Row key={index}>
+              <Table.Cell>{renderGiven(row.given[0])}</Table.Cell>
+              <Table.Cell>
                 <ul>
                   {row.when.map((item, index) => (
                     <li key={index}>
@@ -121,17 +123,17 @@ export const Specifications = ({file, name}: SpecificationsProps) => {
                     </li>
                   ))}
                 </ul>
-              </td>
-              <td>
+              </Table.Cell>
+              <Table.Cell>
                 <ul>
                   {row.then.map((item, index) => (
                     <li key={index}>{(item.indexOf('should') === 0 ? 'it ' : '') + item}</li>
                   ))}
                 </ul>
-              </td>
-            </TableRow>
+              </Table.Cell>
+            </Table.Row>
           ))}
-        </tbody>
+        </Table.Body>
       </Table>
       Source:{' '}
       <Hyperlink href={`${githubUrl}blob/${githubBranch}/cypress/integration/${file}`}>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "11.0.0-alpha.707-next.0",
+  "version": "11.0.0-alpha.708-next.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -44,10 +44,10 @@
   "dependencies": {
     "@emotion/styled": "^11.6.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^11.0.0-alpha.707-next.0",
-    "@workday/canvas-kit-preview-react": "^11.0.0-alpha.707-next.0",
-    "@workday/canvas-kit-react": "^11.0.0-alpha.707-next.0",
-    "@workday/canvas-kit-styling": "^11.0.0-alpha.707-next.0",
+    "@workday/canvas-kit-labs-react": "^11.0.0-alpha.708-next.0",
+    "@workday/canvas-kit-preview-react": "^11.0.0-alpha.708-next.0",
+    "@workday/canvas-kit-react": "^11.0.0-alpha.708-next.0",
+    "@workday/canvas-kit-styling": "^11.0.0-alpha.708-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^1.0.2",
     "markdown-to-jsx": "^6.10.3",
@@ -59,5 +59,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "4.2"
   },
-  "gitHead": "bc3899968d3ed263da61cea6cde9f636be9b3528"
+  "gitHead": "c88b748b4f8ad105e0cc48bd7b67716841abe30d"
 }

package/dist/mdx/preview-react/table/Table.mdx

@@ -1,66 +0,0 @@
-import {SymbolDoc} from '@workday/canvas-kit-docs';
-import {Table} from '@workday/canvas-kit-preview-react/table';
-// Examples
-import Basic from './examples/Basic';
-import BasicWithHeading from './examples/BasicWithHeading';
-import FixedColumn from './examples/FixedColumn';
-import RightToLeft from './examples/RightToLeft';
-
-
-# Canvas Kit Table
-
-`Table` is a simple styled compound component that renders a
-[table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) element. It is used to
-present information in a two-dimensional table comprised of rows and columns of cells containing
-data.
-
-## Installation
-
-```sh
-yarn add @workday/canvas-kit-preview-react
-```
-
-## Usage
-
-### Basic Example
-
-Users may not want to use a `caption` so they can import [Heading](/components/text/heading/) or
-[Text](/components/text/text/) instead. This will give the user more flexibility around the
-customization of the title/heading of their table.
-
-<ExampleCodeBlock code={BasicWithHeading} />
-
-### Right to Left
-
-Table supports right-to-left languages when specified in the CanvasProvider theme.
-
-<ExampleCodeBlock code={RightToLeft} />
-
-### Example with Caption
-
-Users are free to use a `caption` instead of a heading. A `caption` is not required but it is good
-for
-[accessibility](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table#accessibility_concerns)
-purposes.
-
-<ExampleCodeBlock code={Basic} />
-
-### Fixed Column
-
-Users may add styles to the `Table.Header` to render a fixed column. The example below assigns a
-`width` to the `Table` to guarantee the fixed column is triggered, but you are free to omit the
-`width` if you would only like the fixed column to be triggered if necessary.
-
-<ExampleCodeBlock code={FixedColumn} />
-
-### Advanced
-
-You can also find several advanced Table examples in our Storybook Examples section.
-
-- [Expandable Rows](/docs/examples-tables-advanced--expandable-rows)
-- [Selectable Rows ](/docs/examples-tables-advanced--selectable-rows)
-- [Sortable Column Headers](/docs/examples-tables-advanced--sortable-column-headers)
-
-## Component API
-
-<SymbolDoc name="Table" fileName="/preview-react/" />