From e8ab1141605eb83cd77964553f417b0dde589888 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro.celaya@hypothes.is>
Date: Tue, 7 Nov 2023 16:28:54 +0100
Subject: [PATCH] Propagate borderless prop from DataTable to Table

---
 src/components/data/DataTable.tsx             |  9 ++++++++-
 .../patterns/data/DataTablePage.tsx           | 20 +++++++++++++++++++
 .../components/patterns/data/TablePage.tsx    |  2 +-
 3 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/components/data/DataTable.tsx b/src/components/data/DataTable.tsx
index a670a67d9..b68f700ea 100644
--- 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
index a53f5c935..1014ee5fe 100644
--- a/src/pattern-library/components/patterns/data/DataTablePage.tsx
+++ b/src/pattern-library/components/patterns/data/DataTablePage.tsx
@@ -488,6 +488,26 @@ export default function DataTablePage() {
             </Library.Demo>
           </Library.Example>
 
+          <Library.Example title="borderless">
+            <Library.Info>
+              <Library.InfoItem label="description">
+                Set this boolean prop if you want to remove the table{"'"}s
+                outer borders, in case it is rendered in a container with its
+                own borders. See{' '}
+                <Library.Link href="/data-table#borderless-table">
+                  Borderless Table
+                </Library.Link>
+                .
+              </Library.InfoItem>
+              <Library.InfoItem label="type">
+                <code>boolean</code>
+              </Library.InfoItem>
+              <Library.InfoItem label="default">
+                <code>false</code>
+              </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
index 89318249a..c066fcd1d 100644
--- a/src/pattern-library/components/patterns/data/TablePage.tsx
+++ b/src/pattern-library/components/patterns/data/TablePage.tsx
@@ -297,7 +297,7 @@ export default function TablePage() {
             </Library.Info>
 
             <Library.Demo title="Table without borders" withSource>
-              <Table title="Some sushi rolls" borderless>
+              <Table id="borderless-table" title="Some sushi rolls" borderless>
                 <TableHead>
                   <TableRow>
                     <TableCell classes="w-[180px]">Sushi roll name</TableCell>