From c113512247841535c79bb56cd29de10ffd0ab4c7 Mon Sep 17 00:00:00 2001
From: Sawyer <git@sawyerh.com>
Date: Sat, 25 Feb 2023 13:55:17 -0800
Subject: [PATCH] Add className prop to Table component

---
 src/components/Table/Table.test.tsx |  8 ++++++++
 src/components/Table/Table.tsx      | 24 +++++++++++++++---------
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/components/Table/Table.test.tsx b/src/components/Table/Table.test.tsx
index 080d1e23b3..5208f4eb97 100644
--- a/src/components/Table/Table.test.tsx
+++ b/src/components/Table/Table.test.tsx
@@ -97,4 +97,12 @@ describe('Table component', () => {
       'usa-table usa-table--stacked-header'
     )
   })
+
+  it('passes the class onto the root table element', () => {
+    const { getByRole } = render(
+      <Table className="custom-class">{testContent}</Table>
+    )
+
+    expect(getByRole('table')).toHaveClass('custom-class')
+  })
 })
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index a171e1fad4..2ede3f88c6 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -7,6 +7,7 @@ interface TableProps {
   bordered?: boolean
   caption?: React.ReactNode
   children: React.ReactNode
+  className?: string
   fullWidth?: boolean
   fixed?: boolean
   scrollable?: boolean
@@ -19,6 +20,7 @@ export const Table = ({
   bordered,
   caption,
   children,
+  className,
   fullWidth,
   fixed,
   scrollable,
@@ -26,15 +28,19 @@ export const Table = ({
   compact,
   stackedStyle = 'none',
 }: TableProps): React.ReactElement => {
-  const classes = classnames('usa-table', {
-    'usa-table--borderless': !bordered,
-    [`${styles.fullwidth}`]: fullWidth,
-    [`${styles.fixed}`]: fixed,
-    'usa-table--striped': striped,
-    'usa-table--compact': compact,
-    'usa-table--stacked': stackedStyle === 'default',
-    'usa-table--stacked-header': stackedStyle === 'headers',
-  })
+  const classes = classnames(
+    'usa-table',
+    {
+      'usa-table--borderless': !bordered,
+      [`${styles.fullwidth}`]: fullWidth,
+      [`${styles.fixed}`]: fixed,
+      'usa-table--striped': striped,
+      'usa-table--compact': compact,
+      'usa-table--stacked': stackedStyle === 'default',
+      'usa-table--stacked-header': stackedStyle === 'headers',
+    },
+    className
+  )
 
   if (compact && stackedStyle !== 'none') {
     console.warn(