From db9cd15fb0b88a8d388087b1ad34a7d0bec0401f Mon Sep 17 00:00:00 2001
From: William Stanton <40372497+williamjstanton@users.noreply.github.com>
Date: Wed, 4 Oct 2023 14:35:33 -0700
Subject: [PATCH 1/2] adding selectable rows example

---
 .../table/stories/examples/SelectableRows.tsx | 74 +++++++++++++++++++
 1 file changed, 74 insertions(+)
 create mode 100644 modules/preview-react/table/stories/examples/SelectableRows.tsx

diff --git a/modules/preview-react/table/stories/examples/SelectableRows.tsx b/modules/preview-react/table/stories/examples/SelectableRows.tsx
new file mode 100644
index 0000000000..f3c1bf436b
--- /dev/null
+++ b/modules/preview-react/table/stories/examples/SelectableRows.tsx
@@ -0,0 +1,74 @@
+import React from 'react';
+
+import {Table} from '@workday/canvas-kit-preview-react/table';
+import {Heading} from '@workday/canvas-kit-react/text';
+import {Checkbox} from '@workday/canvas-kit-react/checkbox';
+import {styled, useUniqueId} from '@workday/canvas-kit-react/common';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+import {colors} from '@workday/canvas-kit-react/tokens';
+
+const pizzaToppingData = [
+  {topping: 'Pepperoni', amount: '2.5 oz.'},
+  {topping: 'Mozzarella', amount: '5 oz.'},
+  {topping: 'Basil', amount: '10 Leaves'},
+  {topping: 'Roasted Red Peppers', amount: '3 oz.'},
+  {topping: 'Mushrooms', amount: '2 oz.'},
+];
+
+const StyledCell = styled(Table.Cell)({
+  backgroundColor: 'transparent',
+});
+
+const CustomRow = props => {
+  const [isSelected, setIsSelected] = React.useState(props.selected);
+  const selectRowHandler = e => {
+    setIsSelected(e.target.checked);
+  };
+
+  return (
+    <Table.Row background={isSelected && colors.blueberry200}>
+      <StyledCell>
+        <Tooltip title={props.rowData.topping}>
+          <Checkbox checked={isSelected} onChange={selectRowHandler} />
+        </Tooltip>
+      </StyledCell>
+      <StyledCell>{props.rowData.topping}</StyledCell>
+      <StyledCell>{props.rowData.amount}</StyledCell>
+    </Table.Row>
+  );
+};
+
+export const SelectableRows = () => {
+  const headingID = useUniqueId();
+  const [selectAll, setSelectAll] = React.useState(false);
+  const selectAllHandler = e => {
+    setSelectAll(e.target.checked);
+  };
+
+  return (
+    <>
+      <Heading as="h3" id={headingID} size="small" marginBottom="s">
+        Pizza Toppings
+      </Heading>
+      <Table aria-labelledby={headingID}>
+        <Table.Row>
+          <StyledCell backgroundColor={colors.soap100}>
+            <Tooltip title="Select All">
+              <Checkbox checked={selectAll} onChange={selectAllHandler} />
+            </Tooltip>
+          </StyledCell>
+          <Table.Header scope="col" backgroundColor={colors.soap100}>
+            Toppings
+          </Table.Header>
+          <Table.Header scope="col" backgroundColor={colors.soap100}>
+            Amount
+          </Table.Header>
+        </Table.Row>
+
+        {pizzaToppingData.map(i => (
+          <CustomRow rowData={i} selected={selectAll} />
+        ))}
+      </Table>
+    </>
+  );
+};

From 7173ff6382a21982637b4c15c784d5e67145d8f8 Mon Sep 17 00:00:00 2001
From: William Stanton <40372497+williamjstanton@users.noreply.github.com>
Date: Wed, 4 Oct 2023 14:38:06 -0700
Subject: [PATCH 2/2] Update Table.stories.mdx

---
 modules/preview-react/table/stories/Table.stories.mdx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/modules/preview-react/table/stories/Table.stories.mdx b/modules/preview-react/table/stories/Table.stories.mdx
index 68ae97f9d4..0f4a8ee229 100644
--- a/modules/preview-react/table/stories/Table.stories.mdx
+++ b/modules/preview-react/table/stories/Table.stories.mdx
@@ -47,6 +47,10 @@ Users may add styles to the `Table.Header` to render a fixed column. The example
 
 <ExampleCodeBlock code={FixedColumn} />
 
+### Selectable Rows
+
+<ExampleCodeBlock code={SelectableRows} />
+
 ## Component API
 
 <SymbolDoc name="Table" fileName="/preview-react/" />