Propagate borderless prop from DataTable to Table

hypothesis · Nov 8, 2023 · 83c8ce1 · 83c8ce1
1 parent a577d5a
commit 83c8ce1
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 2 deletions.
diff --git a/src/components/data/DataTable.tsx b/src/components/data/DataTable.tsx
@@ -40,6 +40,9 @@ type ComponentProps<Row> = {
   /** Callback to render an individual table cell */
   renderItem?: (r: Row, field: keyof Row) => ComponentChildren;
   title: string;
+
+  /** Turn off outer table borders */
+  borderless?: boolean;
 };
 
 export type DataTableProps<Row> = CompositeProps &
@@ -63,6 +66,9 @@ export default function DataTable<Row>({
   onConfirmRow,
   emptyMessage,
 
+  // Forwarded to Table
+  borderless,
+
   ...htmlAttributes
 }: DataTableProps<Row>) {
   const tableRef = useSyncedRef(elementRef);
@@ -133,7 +139,8 @@ export default function DataTable<Row>({
       title={title}
       elementRef={downcastRef(tableRef)}
       interactive={!!(onSelectRow || onConfirmRow)}
-      stickyHeader={true}
+      stickyHeader
+      borderless={borderless}
     >
       <TableHead>
         <TableRow>

diff --git a/src/pattern-library/components/patterns/data/DataTablePage.tsx b/src/pattern-library/components/patterns/data/DataTablePage.tsx
@@ -488,6 +488,18 @@ export default function DataTablePage() {
             </Library.Demo>
           </Library.Example>
 
+          <Library.Example title="borderless">
+            <Library.Info>
+              <Library.InfoItem label="description">
+                See{' '}
+                <Library.Link href="/data-table#table-props-borderless">
+                  borderless Table
+                </Library.Link>
+                .
+              </Library.InfoItem>
+            </Library.Info>
+          </Library.Example>
+
           <Library.Example title="...htmlAttributes">
             <Library.Info>
               <Library.InfoItem label="description">

diff --git a/src/pattern-library/components/patterns/data/TablePage.tsx b/src/pattern-library/components/patterns/data/TablePage.tsx
@@ -281,7 +281,7 @@ export default function TablePage() {
               </Table>
             </Library.Demo>
           </Library.Example>
-          <Library.Example title="borderless">
+          <Library.Example id="table-props-borderless" title="borderless">
             <Library.Info>
               <Library.InfoItem label="description">
                 Set this boolean prop if you want to remove the table{"'"}s