+
+ The Table component uses the TanStack Table
+ library to render a table. The table is created using the{' '}
+ columns and{' '}
+ data properties. The table is responsive and
+ will adjust to the size of the container. The table is styled using Tailwind CSS.
+
+
+
+ Begin with a data type that describes the data to be displayed in the table. The data type
+ should include the properties that will be displayed in the table.
+
+
+
+
+
+ Create the column definitions. Basic column definitions may be created with a simple
+ array. More advanced column definitions may be created using the{' '}
+ createColumnHelper function. The column
+ definitions should include the properties that will be displayed in the table. The column
+ definitions should also include the{' '}
+ accessorKey property, which is used to access
+ the data in the data object. Learn more about the column definitions in the official{' '}
+
+ documentation
+
+ .
+
+
+
+
+
+
+ Properties
+
+
data={data} columns={columns} />
+
+
+
+ Examples
+
+
+
+ Basic
+
+
+ This is the most basic example of the Table {' '}
+ component. The table is created using the{' '}
+ columns and{' '}
+ data properties. The table is responsive and
+ will adjust to the size of the container. The table is styled using Tailwind CSS.
+
+
+
+ {/* Example */}
+
data={petData} columns={petColumns} />
+
+ data={petData} columns={petColumns} />`}
+ />
+
+
+
+ Column Helper
+
+
+ Column definitions are plain objects. A column helper, when created with the data type
+ definition, returns a utility that allows you to create column definitions in a type-safe
+ manner. Learn more about the column helper functions in the official{' '}
+
+ documentation
+
+ .
+
+
+
+ {/* Example */}
+
data={petData} columns={petColumnsWithHelper} />
+
+ ();
+const petColumnsWithHelper = [
+ petColumnHelper.accessor('id', {
+ cell: (info) => (
+ {info.getValue()}
+ ),
+ header: () => 'ID',
+ }),
+ petColumnHelper.accessor('name', {
+ cell: (info) => info.renderValue(),
+ header: (info) => {info.column.id} ,
+ }),
+ petColumnHelper.accessor('species', {
+ cell: (info) => info.renderValue(),
+ header: () => 'Species',
+ }),
+ petColumnHelper.accessor('age', {
+ cell: (info) => info.renderValue(),
+ header: () => 'Age',
+ }),
+ petColumnHelper.accessor('owner', {
+ cell: (info) => info.renderValue(),
+ header: () => 'Owner',
+ }),
+] as ColumnDef[];`}
+ />
+ data={petData} columns={petColumnsWithHelper} />`}
+ />
+
+
+
+ );
+};
+
+export default TableComponents;
diff --git a/src/pages/Components/components/TabsComponents.tsx b/src/pages/Components/components/TabsComponents.tsx
index 91c8d2b..5918391 100644
--- a/src/pages/Components/components/TabsComponents.tsx
+++ b/src/pages/Components/components/TabsComponents.tsx
@@ -1,4 +1,4 @@
-import { createColumnHelper } from '@tanstack/react-table';
+import { ColumnDef, createColumnHelper } from '@tanstack/react-table';
import { BaseComponentProps } from 'common/utils/types';
import { ComponentProperty } from '../model/components';
@@ -45,7 +45,7 @@ const TabsComponents = ({
cell: (info) => info.renderValue(),
header: () => 'Description',
}),
- ];
+ ] as ColumnDef[];
return (
@@ -62,7 +62,7 @@ const TabsComponents = ({
Properties
- data={data} columns={columns} />
+ data={data} columns={columns} />
diff --git a/src/pages/Components/components/TextComponents.tsx b/src/pages/Components/components/TextComponents.tsx
index 1d58f38..22eb287 100644
--- a/src/pages/Components/components/TextComponents.tsx
+++ b/src/pages/Components/components/TextComponents.tsx
@@ -1,4 +1,4 @@
-import { createColumnHelper } from '@tanstack/react-table';
+import { ColumnDef, createColumnHelper } from '@tanstack/react-table';
import { BaseComponentProps } from 'common/utils/types';
import CodeSnippet from 'common/components/Text/CodeSnippet';
@@ -45,7 +45,7 @@ const TextComponents = ({
cell: (info) => info.renderValue(),
header: () => 'Description',
}),
- ];
+ ] as ColumnDef[];
return (
@@ -63,7 +63,7 @@ const TextComponents = ({
Properties
- data={data} columns={columns} />
+ data={data} columns={columns} />
Examples
diff --git a/src/pages/Components/components/TextareaComponents.tsx b/src/pages/Components/components/TextareaComponents.tsx
index d99d7ff..d6914d5 100644
--- a/src/pages/Components/components/TextareaComponents.tsx
+++ b/src/pages/Components/components/TextareaComponents.tsx
@@ -1,4 +1,4 @@
-import { createColumnHelper } from '@tanstack/react-table';
+import { ColumnDef, createColumnHelper } from '@tanstack/react-table';
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import { object, string } from 'yup';
@@ -58,7 +58,7 @@ const TextareaComponents = ({
cell: (info) => info.renderValue(),
header: () => 'Description',
}),
- ];
+ ] as ColumnDef[];
const { control, handleSubmit, reset } = useForm({
defaultValues: {
@@ -97,7 +97,7 @@ const TextareaComponents = ({
Properties
- data={data} columns={columns} />
+ data={data} columns={columns} />
diff --git a/src/pages/Components/components/ToastComponents.tsx b/src/pages/Components/components/ToastComponents.tsx
index a4f2818..c710646 100644
--- a/src/pages/Components/components/ToastComponents.tsx
+++ b/src/pages/Components/components/ToastComponents.tsx
@@ -1,4 +1,4 @@
-import { createColumnHelper } from '@tanstack/react-table';
+import { ColumnDef, createColumnHelper } from '@tanstack/react-table';
import noop from 'lodash/noop';
import { BaseComponentProps } from 'common/utils/types';
@@ -48,7 +48,7 @@ const ToastComponents = ({
cell: (info) => info.renderValue(),
header: () => 'Description',
}),
- ];
+ ] as ColumnDef[];
/* set up for examples */
const { createToast } = useToasts();
@@ -93,7 +93,7 @@ createToast({
Properties
- data={data} columns={columns} />
+ data={data} columns={columns} />
diff --git a/src/pages/Components/components/ToggleComponents.tsx b/src/pages/Components/components/ToggleComponents.tsx
index 1174ed7..9919d3d 100644
--- a/src/pages/Components/components/ToggleComponents.tsx
+++ b/src/pages/Components/components/ToggleComponents.tsx
@@ -1,4 +1,4 @@
-import { createColumnHelper } from '@tanstack/react-table';
+import { ColumnDef, createColumnHelper } from '@tanstack/react-table';
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import { boolean, object } from 'yup';
@@ -66,7 +66,7 @@ const ToggleComponents = ({
cell: (info) => info.renderValue(),
header: () => 'Description',
}),
- ];
+ ] as ColumnDef[];
const { control, handleSubmit, reset } = useForm({
defaultValues: {
@@ -98,7 +98,7 @@ const ToggleComponents = ({
Properties
- data={data} columns={columns} />
+ data={data} columns={columns} />
diff --git a/src/pages/Components/components/__tests__/TableComponents.test.tsx b/src/pages/Components/components/__tests__/TableComponents.test.tsx
new file mode 100644
index 0000000..1de1ea0
--- /dev/null
+++ b/src/pages/Components/components/__tests__/TableComponents.test.tsx
@@ -0,0 +1,16 @@
+import { describe, expect, it } from 'vitest';
+
+import { render, screen } from 'test/test-utils';
+
+import TableComponents from '../TableComponents';
+
+describe('TableComponents', () => {
+ it('should render successfully', async () => {
+ // ARRANGE
+ render( );
+ await screen.findByTestId('components-table');
+
+ // ASSERT
+ expect(screen.getByTestId('components-table')).toBeInTheDocument();
+ });
+});