feat: Add className prop to Table component (#2269)

Co-authored-by: haworku <[email protected]>
trussworks · Mar 27, 2023 · cf082c5 · cf082c5
1 parent 7e6b891
commit cf082c5
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 9 deletions.
diff --git 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
@@ -7,6 +7,7 @@ interface TableProps {
   bordered?: boolean
   caption?: React.ReactNode
   children: React.ReactNode
+  className?: string
   fullWidth?: boolean
   fixed?: boolean
   scrollable?: boolean
@@ -19,22 +20,27 @@ export const Table = ({
   bordered,
   caption,
   children,
+  className,
   fullWidth,
   fixed,
   scrollable,
   striped,
   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(