From 40e1b2a47bb664055c55803cf351b661f1341970 Mon Sep 17 00:00:00 2001 From: Xavier Abad <77491413+masterprog-cmd@users.noreply.github.com> Date: Tue, 5 Nov 2024 16:22:16 +0100 Subject: [PATCH 1/5] feat: table component --- package.json | 2 +- setupTests.ts | 2 + src/components/index.ts | 1 + src/components/table/Table.tsx | 57 ++++++ src/components/table/__test__/Table.test.tsx | 184 ++++++++++++++++++ .../__snapshots__/Table.test.tsx.snap | 83 ++++++++ .../components/table/Table.stories.tsx | 92 +++++++++ 7 files changed, 420 insertions(+), 1 deletion(-) create mode 100644 src/components/table/Table.tsx create mode 100644 src/components/table/__test__/Table.test.tsx create mode 100644 src/components/table/__test__/__snapshots__/Table.test.tsx.snap create mode 100644 src/stories/components/table/Table.stories.tsx diff --git a/package.json b/package.json index 9d11d3a..6d700a7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@internxt/internxtui", - "version": "0.0.6", + "version": "0.0.7", "description": "Library of Internxt components", "repository": { "type": "git", diff --git a/setupTests.ts b/setupTests.ts index 3bb7dd8..ff5c7a3 100644 --- a/setupTests.ts +++ b/setupTests.ts @@ -1,6 +1,8 @@ import { expect } from 'vitest'; import * as matchers from '@testing-library/jest-dom/matchers'; import { TestingLibraryMatchers } from '@testing-library/jest-dom/matchers'; +import '@testing-library/jest-dom'; + declare module 'vitest' { // eslint-disable-next-line @typescript-eslint/no-explicit-any interface Assertion extends jest.Matchers, TestingLibraryMatchers {} diff --git a/src/components/index.ts b/src/components/index.ts index 51a79a3..a0c4e71 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -7,3 +7,4 @@ export * from './radio-button/RadioButton'; export * from './avatar/Avatar'; export * from './spinner/Spinner'; export * from './slider/RangeSlider'; +export * from './table/Table'; diff --git a/src/components/table/Table.tsx b/src/components/table/Table.tsx new file mode 100644 index 0000000..0b09882 --- /dev/null +++ b/src/components/table/Table.tsx @@ -0,0 +1,57 @@ +import React from 'react'; + +interface TableProps { + children: React.ReactNode; + className?: string; +} + +interface TableHeaderProps { + children: React.ReactNode; + className?: string; +} + +interface TableRowProps { + children: React.ReactNode; + className?: string; + onClick?: (e: unknown) => void; +} + +interface TableCellProps { + children: React.ReactNode; + className?: string; + isHeader?: boolean; + onClick?: (e: unknown) => void; +} + +export const Table: React.FC = ({ + children, + className = 'min-w-full border border-gray-10 rounded-lg overflow-hidden', +}) => ( +
+ {children}
+
+); + +export const TableHeader: React.FC = ({ + children, + className = 'bg-gray-1 border-b border-gray-10 text-gray-100 font-semibold', +}) => {children}; + +export const TableRow: React.FC = ({ + children, + className = 'hover:bg-gray-1 border-b border-gray-10 last:border-none text-sm', + onClick, +}) => ( + + {children} + +); + +export const TableCell: React.FC = ({ children, className = 'p-4', isHeader = false, onClick }) => { + const Component = isHeader ? 'th' : 'td'; + return ( + + {children} + + ); +}; diff --git a/src/components/table/__test__/Table.test.tsx b/src/components/table/__test__/Table.test.tsx new file mode 100644 index 0000000..38c84fe --- /dev/null +++ b/src/components/table/__test__/Table.test.tsx @@ -0,0 +1,184 @@ +import React from 'react'; +import { render, screen, fireEvent } from '@testing-library/react'; +import { describe, expect, it, vi } from 'vitest'; +import { Table, TableHeader, TableRow, TableCell } from '../Table'; + +describe('Table', () => { + it('renders table with default className', () => { + render( + + + + Example 1 + Example 2 + + + + + Cell 1 + Cell 2 + + +
, + ); + + const tableComponent = screen.getByRole('table'); + expect(tableComponent).toBeInTheDocument(); + expect(tableComponent).toHaveClass('w-full'); + expect(tableComponent).toMatchSnapshot(); + }); +}); + +describe('TableHeader', () => { + it('renders header with default className', () => { + render( + + + + Example 1 + Example 2 + + +
, + ); + + const headerComponent = screen.getByRole('rowgroup'); + expect(headerComponent).toBeInTheDocument(); + expect(headerComponent).toHaveClass('bg-gray-1 border-b border-gray-10 text-gray-100 font-semibold'); + expect(headerComponent).toMatchSnapshot(); + }); + + it('renders header with custom className', () => { + render( + + + + Example + + +
, + ); + + const headerComponent = screen.getByRole('rowgroup'); + expect(headerComponent).toHaveClass('custom-header-class'); + }); +}); + +describe('TableRow', () => { + it('renders row with default className', () => { + render( + + + + Example + + +
, + ); + + const rowComponent = screen.getByRole('row'); + expect(rowComponent).toBeInTheDocument(); + expect(rowComponent).toHaveClass('hover:bg-gray-1 border-b border-gray-10 last:border-none text-sm'); + expect(rowComponent).toMatchSnapshot(); + }); + + it('renders row with custom className', () => { + render( + + + + Example + + +
, + ); + + const rowComponent = screen.getByRole('row'); + expect(rowComponent).toHaveClass('custom-row-class'); + }); + + it('calls onClick when row is clicked', () => { + const handleClick = vi.fn(); + render( + + + + Example + + +
, + ); + + const row = screen.getByRole('row'); + fireEvent.click(row); + expect(handleClick).toHaveBeenCalledTimes(1); + }); +}); + +describe('TableCell', () => { + it('renders cell with default className', () => { + render( + + + + Example + + +
, + ); + + const cell = screen.getByRole('cell'); + expect(cell).toBeInTheDocument(); + expect(cell).toHaveClass('p-4'); + expect(cell).toMatchSnapshot(); + }); + + it('renders header cell with custom className and isHeader true', () => { + render( + + + + + Example + + + +
, + ); + + const headerCell = screen.getByRole('columnheader'); + expect(headerCell).toHaveClass('custom-header-cell text-left font-medium'); + }); + + it('renders regular cell with custom className', () => { + render( + + + + Example + + +
, + ); + + const cell = screen.getByRole('cell'); + expect(cell).toHaveClass('custom-cell-class'); + }); + + it('calls onClick when cell is clicked', () => { + const handleClick = vi.fn(); + render( + + + + Example + + +
, + ); + + const cell = screen.getByRole('cell'); + fireEvent.click(cell); + expect(handleClick).toHaveBeenCalledTimes(1); + }); +}); diff --git a/src/components/table/__test__/__snapshots__/Table.test.tsx.snap b/src/components/table/__test__/__snapshots__/Table.test.tsx.snap new file mode 100644 index 0000000..9865eab --- /dev/null +++ b/src/components/table/__test__/__snapshots__/Table.test.tsx.snap @@ -0,0 +1,83 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`Table > renders table with default className 1`] = ` + + + + + + + + + + + + + +
+ Example 1 + + Example 2 +
+ Cell 1 + + Cell 2 +
+`; + +exports[`TableCell > renders cell with default className 1`] = ` + + Example + +`; + +exports[`TableHeader > renders header with default className 1`] = ` + + + + Example 1 + + + Example 2 + + + +`; + +exports[`TableRow > renders row with default className 1`] = ` + + + Example + + +`; diff --git a/src/stories/components/table/Table.stories.tsx b/src/stories/components/table/Table.stories.tsx new file mode 100644 index 0000000..b9cdd88 --- /dev/null +++ b/src/stories/components/table/Table.stories.tsx @@ -0,0 +1,92 @@ +import { Meta, StoryObj } from '@storybook/react'; +import { Table, TableHeader, TableRow, TableCell } from '../../../components/table/Table'; + +interface ActivityRow { + date: string; + time: string; + memberName: string; + memberEmail: string; + activity: { action: string; color: string }; + access: string; +} + +const mockData: ActivityRow[] = [ + { + date: 'February 6, 2024', + time: '4:41 PM', + memberName: 'Daniel Dun', + memberEmail: 'daniel@internxt.com', + activity: { action: 'Signed in', color: 'text-green-600' }, + access: 'Web', + }, + { + date: 'February 6, 2024', + time: '4:41 PM', + memberName: 'Steven S', + memberEmail: 'stevens@internxt.com', + activity: { action: 'Changed', color: 'text-orange-500' }, + access: 'Web', + }, + { + date: 'February 6, 2024', + time: '4:41 PM', + memberName: 'Daniel Dun', + memberEmail: 'daniel@internxt.com', + activity: { action: 'Signed out', color: 'text-gray-400' }, + access: 'Web', + }, +]; + +const meta: Meta = { + title: 'Components/Table', + component: Table, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: () => ( + + + + Date + +
+
+

Name

+
+ + +
+
+

Activity

+
+ + +
+
+

Access

+
+ + + +
+ {mockData.map((item, index) => ( + + {item.date} + +
{item.memberName}
+
{item.memberEmail}
+ + + {item.activity.action} + + {item.access} + + ))} + +
+ ), +}; From 55498accdd8d39f9227a45bcec1ac2bf98d1afa5 Mon Sep 17 00:00:00 2001 From: Xavier Abad <77491413+masterprog-cmd@users.noreply.github.com> Date: Thu, 28 Nov 2024 16:36:48 +0100 Subject: [PATCH 2/5] feat: Table --- package.json | 3 +- src/components/checkbox/Checkbox.tsx | 4 +- .../checkbox/__test__/Checkbox.test.tsx | 2 +- src/components/table/Table.tsx | 53 ++++++++++--------- src/components/table/__test__/Table.test.tsx | 30 +++++------ .../components/checkbox/Checkbox.stories.tsx | 2 +- .../components/table/Table.stories.tsx | 6 +-- 7 files changed, 52 insertions(+), 48 deletions(-) diff --git a/package.json b/package.json index 6d700a7..e9e319e 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,8 @@ "/dist" ], "peerDependencies": { - "react": "^18.2.0" + "react": "^18.2.0", + "@phosphor-icons/react": "^2.1.5" }, "resolutions": { "jackspeak": "2.1.1" diff --git a/src/components/checkbox/Checkbox.tsx b/src/components/checkbox/Checkbox.tsx index ccac7a2..d33eaad 100644 --- a/src/components/checkbox/Checkbox.tsx +++ b/src/components/checkbox/Checkbox.tsx @@ -10,7 +10,7 @@ interface CheckboxComponentProps { required?: boolean; } -const Checkbox = ({ +export const Checkbox = ({ checked = true, indeterminate = false, disabled = false, @@ -44,5 +44,3 @@ const Checkbox = ({ ); }; - -export default Checkbox; diff --git a/src/components/checkbox/__test__/Checkbox.test.tsx b/src/components/checkbox/__test__/Checkbox.test.tsx index 9453866..3650b22 100644 --- a/src/components/checkbox/__test__/Checkbox.test.tsx +++ b/src/components/checkbox/__test__/Checkbox.test.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { describe, expect, it } from 'vitest'; -import Checkbox from '../Checkbox'; +import { Checkbox } from '../Checkbox'; import { render } from '@testing-library/react'; describe('Checkbox component', () => { diff --git a/src/components/table/Table.tsx b/src/components/table/Table.tsx index 0b09882..c630768 100644 --- a/src/components/table/Table.tsx +++ b/src/components/table/Table.tsx @@ -1,56 +1,61 @@ import React from 'react'; -interface TableProps { +interface TableProps extends React.HTMLAttributes { children: React.ReactNode; className?: string; } -interface TableHeaderProps { +interface TableHeaderProps extends React.HTMLAttributes { children: React.ReactNode; className?: string; } -interface TableRowProps { +interface TableBodyProps extends React.HTMLAttributes { children: React.ReactNode; className?: string; - onClick?: (e: unknown) => void; } -interface TableCellProps { +interface TableRowProps extends React.HTMLAttributes { + children: React.ReactNode; + className?: string; +} + +interface TableCellProps extends React.HTMLAttributes { children: React.ReactNode; className?: string; isHeader?: boolean; - onClick?: (e: unknown) => void; } -export const Table: React.FC = ({ - children, - className = 'min-w-full border border-gray-10 rounded-lg overflow-hidden', -}) => ( +export const Table: React.FC = ({ children, className, ...props }) => (
- {children}
+ + {children} +
); -export const TableHeader: React.FC = ({ - children, - className = 'bg-gray-1 border-b border-gray-10 text-gray-100 font-semibold', -}) => {children}; - -export const TableRow: React.FC = ({ - children, - className = 'hover:bg-gray-1 border-b border-gray-10 last:border-none text-sm', - onClick, -}) => ( - +export const TableHeader: React.FC = ({ children, className, ...props }) => ( + + {children} + +); + +export const TableBody: React.FC = ({ children, className, ...props }) => ( + + {children} + +); + +export const TableRow: React.FC = ({ children, className, onClick, ...props }) => ( + {children} ); -export const TableCell: React.FC = ({ children, className = 'p-4', isHeader = false, onClick }) => { +export const TableCell: React.FC = ({ children, className, isHeader = false, onClick, ...props }) => { const Component = isHeader ? 'th' : 'td'; return ( - + {children} ); diff --git a/src/components/table/__test__/Table.test.tsx b/src/components/table/__test__/Table.test.tsx index 38c84fe..ebcb608 100644 --- a/src/components/table/__test__/Table.test.tsx +++ b/src/components/table/__test__/Table.test.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { render, screen, fireEvent } from '@testing-library/react'; import { describe, expect, it, vi } from 'vitest'; -import { Table, TableHeader, TableRow, TableCell } from '../Table'; +import { Table, TableHeader, TableRow, TableCell, TableBody } from '../Table'; describe('Table', () => { it('renders table with default className', () => { @@ -13,12 +13,12 @@ describe('Table', () => { Example 2 - + Cell 1 Cell 2 - + , ); @@ -68,11 +68,11 @@ describe('TableRow', () => { it('renders row with default className', () => { render( - + Example - +
, ); @@ -85,11 +85,11 @@ describe('TableRow', () => { it('renders row with custom className', () => { render( - + Example - +
, ); @@ -101,11 +101,11 @@ describe('TableRow', () => { const handleClick = vi.fn(); render( - + Example - +
, ); @@ -119,11 +119,11 @@ describe('TableCell', () => { it('renders cell with default className', () => { render( - + Example - +
, ); @@ -153,11 +153,11 @@ describe('TableCell', () => { it('renders regular cell with custom className', () => { render( - + Example - +
, ); @@ -169,11 +169,11 @@ describe('TableCell', () => { const handleClick = vi.fn(); render( - + Example - +
, ); diff --git a/src/stories/components/checkbox/Checkbox.stories.tsx b/src/stories/components/checkbox/Checkbox.stories.tsx index d6c80aa..b0f6441 100644 --- a/src/stories/components/checkbox/Checkbox.stories.tsx +++ b/src/stories/components/checkbox/Checkbox.stories.tsx @@ -1,6 +1,6 @@ import type { Decorator, Meta, StoryObj } from '@storybook/react'; import { useArgs } from '@storybook/preview-api'; -import Checkbox from '../../../components/checkbox/Checkbox'; +import { Checkbox } from '../../../components/checkbox/Checkbox'; const onClick: Decorator = (Story, context) => { const [{ checked }, setArgs] = useArgs(); diff --git a/src/stories/components/table/Table.stories.tsx b/src/stories/components/table/Table.stories.tsx index b9cdd88..f21b92b 100644 --- a/src/stories/components/table/Table.stories.tsx +++ b/src/stories/components/table/Table.stories.tsx @@ -1,5 +1,5 @@ import { Meta, StoryObj } from '@storybook/react'; -import { Table, TableHeader, TableRow, TableCell } from '../../../components/table/Table'; +import { Table, TableHeader, TableRow, TableCell, TableBody } from '../../../components/table/Table'; interface ActivityRow { date: string; @@ -72,7 +72,7 @@ export const Default: Story = { - + {mockData.map((item, index) => ( {item.date} @@ -86,7 +86,7 @@ export const Default: Story = { {item.access} ))} - + ), }; From ff11f1320d1686d0b83e4efb11f592c8ff286c08 Mon Sep 17 00:00:00 2001 From: Xavi Abad <77491413+xabg2@users.noreply.github.com> Date: Wed, 18 Dec 2024 08:38:58 +0100 Subject: [PATCH 3/5] chore: bump package version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index b3df656..116135a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@internxt/ui", - "version": "0.0.9", + "version": "0.0.10", "description": "Library of Internxt components", "repository": { "type": "git", From afe1da587aea75563a886b60750b6d4f717bf29c Mon Sep 17 00:00:00 2001 From: Xavi Abad <77491413+xabg2@users.noreply.github.com> Date: Wed, 18 Dec 2024 08:45:46 +0100 Subject: [PATCH 4/5] fix: exports for Checkbox --- src/components/checkbox/Checkbox.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/checkbox/Checkbox.tsx b/src/components/checkbox/Checkbox.tsx index a142606..8edcbfa 100644 --- a/src/components/checkbox/Checkbox.tsx +++ b/src/components/checkbox/Checkbox.tsx @@ -48,7 +48,7 @@ export interface CheckboxProps { * - Defaults to false. */ -export const Checkbox = ({ +const Checkbox = ({ id, checked = true, indeterminate = false, @@ -92,3 +92,5 @@ export const Checkbox = ({ ); }; + +export default Checkbox; From 6f2f723793ada08d5398366ba8a837cfcb68eb1a Mon Sep 17 00:00:00 2001 From: Xavi Abad <77491413+xabg2@users.noreply.github.com> Date: Wed, 18 Dec 2024 09:07:47 +0100 Subject: [PATCH 5/5] fix: table test --- package.json | 4 +- src/components/table/__test__/Table.test.tsx | 167 ++++----------- .../__snapshots__/Table.test.tsx.snap | 193 +++++++++++------- 3 files changed, 165 insertions(+), 199 deletions(-) diff --git a/package.json b/package.json index 116135a..a19a3ef 100644 --- a/package.json +++ b/package.json @@ -82,8 +82,8 @@ "format": "prettier --write --parser typescript '**/*.{ts,tsx}'", "lint": "eslint . --ext .ts,.tsx --ignore-path .gitignore --fix", "test": "vitest run", - "test-update": "vitest run -u", - "test-watch": "vitest", + "test:update": "vitest run -u", + "test:watch": "vitest", "test:ui": "vitest --ui", "coverage": "vitest run --coverage", "storybook:dev": "storybook dev -p 6006", diff --git a/src/components/table/__test__/Table.test.tsx b/src/components/table/__test__/Table.test.tsx index ebcb608..2829bc8 100644 --- a/src/components/table/__test__/Table.test.tsx +++ b/src/components/table/__test__/Table.test.tsx @@ -1,184 +1,97 @@ import React from 'react'; -import { render, screen, fireEvent } from '@testing-library/react'; -import { describe, expect, it, vi } from 'vitest'; -import { Table, TableHeader, TableRow, TableCell, TableBody } from '../Table'; - -describe('Table', () => { - it('renders table with default className', () => { - render( - - - - Example 1 - Example 2 +import { render } from '@testing-library/react'; +import { describe, it, expect } from 'vitest'; +import { Table, TableHeader, TableBody, TableRow, TableCell } from '../Table'; + +describe('Table Component Snapshots', () => { + it('renders the complete table structure', () => { + const { container } = render( +
+ + + + Header 1 + + Header 2 - + Cell 1 Cell 2 + + Cell 3 + Cell 4 +
, ); - const tableComponent = screen.getByRole('table'); - expect(tableComponent).toBeInTheDocument(); - expect(tableComponent).toHaveClass('w-full'); - expect(tableComponent).toMatchSnapshot(); + expect(container).toMatchSnapshot(); }); -}); -describe('TableHeader', () => { - it('renders header with default className', () => { - render( + it('renders a table with minimal structure', () => { + const { container } = render( - Example 1 - Example 2 - - -
, - ); - - const headerComponent = screen.getByRole('rowgroup'); - expect(headerComponent).toBeInTheDocument(); - expect(headerComponent).toHaveClass('bg-gray-1 border-b border-gray-10 text-gray-100 font-semibold'); - expect(headerComponent).toMatchSnapshot(); - }); - - it('renders header with custom className', () => { - render( - - - - Example + Header -
, - ); - - const headerComponent = screen.getByRole('rowgroup'); - expect(headerComponent).toHaveClass('custom-header-class'); - }); -}); - -describe('TableRow', () => { - it('renders row with default className', () => { - render( - - Example - - -
, - ); - - const rowComponent = screen.getByRole('row'); - expect(rowComponent).toBeInTheDocument(); - expect(rowComponent).toHaveClass('hover:bg-gray-1 border-b border-gray-10 last:border-none text-sm'); - expect(rowComponent).toMatchSnapshot(); - }); - - it('renders row with custom className', () => { - render( - - - - Example + Cell
, ); - const rowComponent = screen.getByRole('row'); - expect(rowComponent).toHaveClass('custom-row-class'); + expect(container).toMatchSnapshot(); }); - it('calls onClick when row is clicked', () => { - const handleClick = vi.fn(); - render( + it('renders a row with an onClick handler', () => { + const handleClick = () => {}; + const { container } = render( - Example + Clickable Row Cell
, ); - const row = screen.getByRole('row'); - fireEvent.click(row); - expect(handleClick).toHaveBeenCalledTimes(1); + expect(container).toMatchSnapshot(); }); -}); -describe('TableCell', () => { - it('renders cell with default className', () => { - render( + it('renders a cell with custom props', () => { + const { container } = render( - Example + + Custom Cell +
, ); - const cell = screen.getByRole('cell'); - expect(cell).toBeInTheDocument(); - expect(cell).toHaveClass('p-4'); - expect(cell).toMatchSnapshot(); + expect(container).toMatchSnapshot(); }); - it('renders header cell with custom className and isHeader true', () => { - render( + it('renders a header cell with isHeader set to true', () => { + const { container } = render( - - Example - + Header Cell
, ); - const headerCell = screen.getByRole('columnheader'); - expect(headerCell).toHaveClass('custom-header-cell text-left font-medium'); - }); - - it('renders regular cell with custom className', () => { - render( - - - - Example - - -
, - ); - - const cell = screen.getByRole('cell'); - expect(cell).toHaveClass('custom-cell-class'); - }); - - it('calls onClick when cell is clicked', () => { - const handleClick = vi.fn(); - render( - - - - Example - - -
, - ); - - const cell = screen.getByRole('cell'); - fireEvent.click(cell); - expect(handleClick).toHaveBeenCalledTimes(1); + expect(container).toMatchSnapshot(); }); }); diff --git a/src/components/table/__test__/__snapshots__/Table.test.tsx.snap b/src/components/table/__test__/__snapshots__/Table.test.tsx.snap index 9865eab..4592f78 100644 --- a/src/components/table/__test__/__snapshots__/Table.test.tsx.snap +++ b/src/components/table/__test__/__snapshots__/Table.test.tsx.snap @@ -1,83 +1,136 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`Table > renders table with default className 1`] = ` - - - - - - - - - renders a cell with custom props 1`] = ` +
+
+
- Example 1 - - Example 2 -
- - - - -
- Cell 1 - - Cell 2 -
+ + + + Custom Cell + + + + + + `; -exports[`TableCell > renders cell with default className 1`] = ` - - Example - +exports[`Table Component Snapshots > renders a header cell with isHeader set to true 1`] = ` +
+
+ + + + + + +
+ Header Cell +
+
+
`; -exports[`TableHeader > renders header with default className 1`] = ` - - - renders a row with an onClick handler 1`] = ` +
+
+ - Example 1 - - + + + +
+
+ Clickable Row Cell +
+
+
+`; + +exports[`Table Component Snapshots > renders a table with minimal structure 1`] = ` +
+
+ - Example 2 - - - + + + + + + + + + + +
+ Header +
+ Cell +
+
+
`; -exports[`TableRow > renders row with default className 1`] = ` - - renders the complete table structure 1`] = ` +
+
- Example - - + + + + + + + + + + + + + + + + + +
+ Header 1 + + Header 2 +
+ Cell 1 + + Cell 2 +
+ Cell 3 + + Cell 4 +
+
+
`;