diff --git a/package-lock.json b/package-lock.json index ce547432..dd12fd26 100644 --- a/package-lock.json +++ b/package-lock.json @@ -39076,6 +39076,12 @@ "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=", "dev": true }, + "@types/lodash": { + "version": "4.14.162", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.162.tgz", + "integrity": "sha512-alvcho1kRUnnD1Gcl4J+hK0eencvzq9rmzvFPRmP5rPHx9VVsJj6bKLTATPVf9ktgv4ujzh7T+XWKp+jhuODig==", + "dev": true + }, "@types/markdown-to-jsx": { "version": "6.11.3", "resolved": "https://registry.npmjs.org/@types/markdown-to-jsx/-/markdown-to-jsx-6.11.3.tgz", diff --git a/package.json b/package.json index f229e8b9..8271bbab 100644 --- a/package.json +++ b/package.json @@ -45,6 +45,7 @@ "bootstrap": "^4.5.2", "classnames": "^2.2.6", "dedent": "^0.7.0", + "lodash": "^4.17.20", "moment": "^2.29.0", "moment-timezone": "^0.5.31", "react": "^16.13.1", @@ -74,6 +75,7 @@ "@types/dedent": "^0.7.0", "@types/faker": "^5.1.7", "@types/jest": "^26.0.14", + "@types/lodash": "^4.14.162", "@types/react-dom": "^17.0.0", "@typescript-eslint/eslint-plugin": "^4.18.0", "@typescript-eslint/parser": "^4.18.0", diff --git a/src/data-table/__snapshots__/data-table.stories.storyshot b/src/data-table/__snapshots__/data-table.stories.storyshot new file mode 100644 index 00000000..11272e4e --- /dev/null +++ b/src/data-table/__snapshots__/data-table.stories.storyshot @@ -0,0 +1,3679 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots Primitives/DataTable Data Table 1`] = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ First Name + + Last Name + + Age + + Sign Up Date + + Foo +
+ Joshua + + Buckridge + + 9 + + + + + - + +
+ Justyn + + Kshlerin + + 52 + + + + + - + +
+ Jarred + + Simonis + + 88 + + + + + - + +
+ Darlene + + Bogisich + + 21 + + + + + - + +
+ Mose + + Parker + + 98 + + + + + - + +
+ Renee + + Dach + + 33 + + + + + - + +
+ Kaylee + + Hodkiewicz + + 33 + + + + + - + +
+ Celestine + + Ankunding + + 94 + + + + + - + +
+ Hannah + + Connelly + + 72 + + + + + - + +
+ Elwin + + Wilkinson + + 61 + + + + + - + +
+ Karley + + Olson + + 83 + + + + + - + +
+ Roger + + Emmerich + + 60 + + + + + - + +
+ Jude + + Rosenbaum + + 12 + + + + + - + +
+ Cody + + Kiehn + + 56 + + + + + - + +
+ Vivianne + + Kub + + 94 + + + + + - + +
+ Celestino + + Beahan + + 90 + + + + + - + +
+ Albert + + Hane + + 37 + + + + + - + +
+ Lucious + + VonRueden + + 48 + + + + + - + +
+ Ike + + Hills + + 2 + + + + + - + +
+ Donnie + + Mosciski + + 98 + + + + + - + +
+ Herbert + + Strosin + + 66 + + + + + - + +
+ Gabrielle + + Robel + + 22 + + + + + - + +
+ Roselyn + + Rohan + + 4 + + + + + - + +
+ Solon + + Nienow + + 20 + + + + + - + +
+ Lambert + + Dickens + + 42 + + + + + - + +
+ Nickolas + + Erdman + + 4 + + + + + - + +
+ Emelia + + Bergstrom + + 8 + + + + + - + +
+ Kevon + + Stark + + 8 + + + + + - + +
+ Corine + + Yost + + 89 + + + + + - + +
+ Estel + + Welch + + 68 + + + + + - + +
+ Curtis + + O'Keefe + + 87 + + + + + - + +
+ Myra + + Labadie + + 9 + + + + + - + +
+ Orin + + Zemlak + + 16 + + + + + - + +
+ Serenity + + Labadie + + 4 + + + + + - + +
+ Coty + + Hamill + + 100 + + + + + - + +
+ Foster + + Bauch + + 83 + + + + + - + +
+ Mozelle + + Lowe + + 87 + + + + + - + +
+ Tia + + McDermott + + 24 + + + + + - + +
+ Lynn + + Strosin + + 15 + + + + + - + +
+ Garrett + + Moore + + 81 + + + + + - + +
+ Effie + + Ruecker + + 53 + + + + + - + +
+ Vernice + + Dickinson + + 99 + + + + + - + +
+ Bertram + + Kuphal + + 25 + + + + + - + +
+ Oceane + + Schowalter + + 57 + + + + + - + +
+ Cedrick + + Hagenes + + 24 + + + + + - + +
+ Kayley + + O'Reilly + + 39 + + + + + - + +
+ Keshawn + + Roberts + + 38 + + + + + - + +
+ Frieda + + Satterfield + + 27 + + + + + - + +
+ Wilbert + + Kunze + + 83 + + + + + - + +
+ Idell + + Lemke + + 77 + + + + + - + +
+`; + +exports[`Storyshots Primitives/DataTable Nested Data Table 1`] = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ First Name + + Last Name + + Age + + Sign Up Date +
+ Destiney + + Schaden + + 90 + + +
+ Garrick + + Bashirian + + 19 + + +
+ Osbaldo + + Bartoletti + + 67 + + +
+ Izabella + + Beier + + 14 + + +
+ Abe + + Ferry + + 58 + + +
+ Carlos + + Schultz + + 10 + + +
+ Santiago + + Pollich + + 34 + + +
+ Kiana + + Hoppe + + 94 + + +
+ Anita + + Russel + + 35 + + +
+ Isabell + + Wilkinson + + 10 + + +
+ Elva + + Kunze + + 99 + + +
+ Benjamin + + Kunze + + 54 + + +
+ Tianna + + Rippin + + 35 + + +
+ Audie + + Pollich + + 89 + + +
+ Garnett + + Daugherty + + 13 + + +
+ Janie + + Miller + + 32 + + +
+ Macy + + Haley + + 69 + + +
+ Alice + + McClure + + 60 + + +
+ Ara + + Fritsch + + 65 + + +
+ Leonora + + Bayer + + 68 + + +
+ Corrine + + Beier + + 35 + + +
+ Tyshawn + + Schneider + + 26 + + +
+ Daron + + Greenholt + + 77 + + +
+ Jaycee + + Zemlak + + 31 + + +
+ Aryanna + + Zieme + + 88 + + +
+ Lori + + Donnelly + + 20 + + +
+ Kaley + + Wehner + + 63 + + +
+ Jadyn + + Goodwin + + 75 + + +
+ Lavinia + + Hayes + + 100 + + +
+ Elfrieda + + Heller + + 13 + + +
+ Harry + + Nienow + + 90 + + +
+ Heaven + + Roberts + + 65 + + +
+ Monserrat + + Quigley + + 11 + + +
+ Ardella + + Green + + 95 + + +
+ Brenna + + Zboncak + + 54 + + +
+ Mike + + O'Keefe + + 5 + + +
+ Alvena + + Mohr + + 83 + + +
+ Dariana + + Heaney + + 82 + + +
+ Kailey + + White + + 50 + + +
+ Savanah + + Dibbert + + 81 + + +
+ Estevan + + Pfannerstill + + 58 + + +
+ Celestino + + Spinka + + 68 + + +
+ Arjun + + Treutel + + 34 + + +
+ Travon + + Yundt + + 79 + + +
+ Matt + + Wunsch + + 4 + + +
+ Haylie + + Johnson + + 1 + + +
+ Prince + + Reinger + + 37 + + +
+ Rollin + + Olson + + 90 + + +
+ Nicole + + Grant + + 18 + + +
+ Eileen + + Hauck + + 34 + + +
+`; + +exports[`Storyshots Primitives/DataTable Nested Data Table For Testing 1`] = ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ First Name + + Last Name + + This column is supposed to empty. It's here to prove typescript detects invalid column access. + + Age + + Sign Up Date + + This column is supposed to empty. It's here to prove typescript detects invalid column access. +
+ Destiney + + Schaden + + + - + + + 90 + + + + + - + +
+ Garrick + + Bashirian + + + - + + + 19 + + + + + - + +
+ Osbaldo + + Bartoletti + + + - + + + 67 + + + + + - + +
+ Izabella + + Beier + + + - + + + 14 + + + + + - + +
+ Abe + + Ferry + + + - + + + 58 + + + + + - + +
+ Carlos + + Schultz + + + - + + + 10 + + + + + - + +
+ Santiago + + Pollich + + + - + + + 34 + + + + + - + +
+ Kiana + + Hoppe + + + - + + + 94 + + + + + - + +
+ Anita + + Russel + + + - + + + 35 + + + + + - + +
+ Isabell + + Wilkinson + + + - + + + 10 + + + + + - + +
+ Elva + + Kunze + + + - + + + 99 + + + + + - + +
+ Benjamin + + Kunze + + + - + + + 54 + + + + + - + +
+ Tianna + + Rippin + + + - + + + 35 + + + + + - + +
+ Audie + + Pollich + + + - + + + 89 + + + + + - + +
+ Garnett + + Daugherty + + + - + + + 13 + + + + + - + +
+ Janie + + Miller + + + - + + + 32 + + + + + - + +
+ Macy + + Haley + + + - + + + 69 + + + + + - + +
+ Alice + + McClure + + + - + + + 60 + + + + + - + +
+ Ara + + Fritsch + + + - + + + 65 + + + + + - + +
+ Leonora + + Bayer + + + - + + + 68 + + + + + - + +
+ Corrine + + Beier + + + - + + + 35 + + + + + - + +
+ Tyshawn + + Schneider + + + - + + + 26 + + + + + - + +
+ Daron + + Greenholt + + + - + + + 77 + + + + + - + +
+ Jaycee + + Zemlak + + + - + + + 31 + + + + + - + +
+ Aryanna + + Zieme + + + - + + + 88 + + + + + - + +
+ Lori + + Donnelly + + + - + + + 20 + + + + + - + +
+ Kaley + + Wehner + + + - + + + 63 + + + + + - + +
+ Jadyn + + Goodwin + + + - + + + 75 + + + + + - + +
+ Lavinia + + Hayes + + + - + + + 100 + + + + + - + +
+ Elfrieda + + Heller + + + - + + + 13 + + + + + - + +
+ Harry + + Nienow + + + - + + + 90 + + + + + - + +
+ Heaven + + Roberts + + + - + + + 65 + + + + + - + +
+ Monserrat + + Quigley + + + - + + + 11 + + + + + - + +
+ Ardella + + Green + + + - + + + 95 + + + + + - + +
+ Brenna + + Zboncak + + + - + + + 54 + + + + + - + +
+ Mike + + O'Keefe + + + - + + + 5 + + + + + - + +
+ Alvena + + Mohr + + + - + + + 83 + + + + + - + +
+ Dariana + + Heaney + + + - + + + 82 + + + + + - + +
+ Kailey + + White + + + - + + + 50 + + + + + - + +
+ Savanah + + Dibbert + + + - + + + 81 + + + + + - + +
+ Estevan + + Pfannerstill + + + - + + + 58 + + + + + - + +
+ Celestino + + Spinka + + + - + + + 68 + + + + + - + +
+ Arjun + + Treutel + + + - + + + 34 + + + + + - + +
+ Travon + + Yundt + + + - + + + 79 + + + + + - + +
+ Matt + + Wunsch + + + - + + + 4 + + + + + - + +
+ Haylie + + Johnson + + + - + + + 1 + + + + + - + +
+ Prince + + Reinger + + + - + + + 37 + + + + + - + +
+ Rollin + + Olson + + + - + + + 90 + + + + + - + +
+ Nicole + + Grant + + + - + + + 18 + + + + + - + +
+ Eileen + + Hauck + + + - + + + 34 + + + + + - + +
+`; diff --git a/src/data-table/column-configuration.tsx b/src/data-table/column-configuration.tsx new file mode 100644 index 00000000..96e3cb2c --- /dev/null +++ b/src/data-table/column-configuration.tsx @@ -0,0 +1,103 @@ +import {startCase} from 'lodash'; +import React, {useContext} from 'react'; + +import {AnyRenderer} from '../renderers'; +import {Renderer} from '../support'; + +import {IdType} from './types'; + +export type ColumnConfiguration = { + label: React.ReactNode; + renderer: Renderer; +}; + +export type ColumnConfigurationWithDefaults = { + label?: React.ReactNode; + renderer?: Renderer; +}; + +export type ColumnConfigurationContextType = { + configuration: Map; + configure: ConfigureFunction; +}; + +export const ColumnConfigurationContext = React.createContext< + ColumnConfigurationContextType + /* @ts-expect-error - no reasonable default */ +>(null); + +/** + * Gets the configuration for the specified column + */ +export function useColummnConfiguration(name: string): ColumnConfiguration { + const {configuration} = useContext(ColumnConfigurationContext); + const config = configuration.get(name); + if (!config) { + throw new Error(`Column ${name} has not been configured`); + } + return config; +} + +export type ConfigureFunction = ( + name: string, + config: ColumnConfigurationWithDefaults +) => void; + +/** + * Gets the function for configuring a column + */ +export function useConfigureColumn(): ConfigureFunction { + const {configure} = useContext(ColumnConfigurationContext); + return configure; +} + +/** + * Returns the names of all of the configured columns so we can iterate over + * them + */ +export function useConfiguredColumnNames(): IdType[] { + const {configuration} = useContext(ColumnConfigurationContext); + return Array.from(configuration.keys()) as IdType[]; +} + +export const ColumnConfigurationProvider: React.FC<{name?: string}> = ({ + children, + name: parentName, +}) => { + const parentContext = useContext(ColumnConfigurationContext); + + let configuration: Map, + configure: ConfigureFunction; + if (parentContext) { + const { + configuration: parentConfiguration, + configure: configureParent, + } = parentContext; + configuration = parentConfiguration; + configure = (name: string, config: ColumnConfigurationWithDefaults) => { + configureParent(`${parentName}.${name}`, config); + }; + } else { + configuration = new Map(); + configure = ( + name: string, + { + label = startCase(name), + renderer = AnyRenderer, + ...config + }: ColumnConfigurationWithDefaults + ) => { + configuration.set(name, { + label, + renderer, + ...config, + }); + }; + } + + return ( + + {children} + + ); +}; diff --git a/src/data-table/column-renderer.tsx b/src/data-table/column-renderer.tsx new file mode 100644 index 00000000..adf1b897 --- /dev/null +++ b/src/data-table/column-renderer.tsx @@ -0,0 +1,28 @@ +import React from 'react'; + +import { + ColumnConfigurationProvider, + useConfigureColumn, +} from './column-configuration'; +import {FieldRendererProps, IdType} from './types'; + +export const ColumnRenderer = >({ + name, + label, + render: Render, +}: FieldRendererProps) => { + const configure = useConfigureColumn(); + + if (Render) { + return ( + + {/* @ts-expect-error - I can't figure out how to convince the compier that Render is not "never" */} + + + ); + } + + configure(name, {label}); + + return null; +}; diff --git a/src/data-table/data-table-body-cell.tsx b/src/data-table/data-table-body-cell.tsx new file mode 100644 index 00000000..4b7a47a9 --- /dev/null +++ b/src/data-table/data-table-body-cell.tsx @@ -0,0 +1,22 @@ +import React from 'react'; + +import {TableBodyCell} from '..'; + +import {useColummnConfiguration} from './column-configuration'; + +export type DataTableBodyCellProps = { + name: string; + value: T; +}; + +export const DataTableBodyCell = ({ + name, + value, +}: DataTableBodyCellProps) => { + const {renderer: Renderer} = useColummnConfiguration(name); + return ( + + + + ); +}; diff --git a/src/data-table/data-table-header-cell.tsx b/src/data-table/data-table-header-cell.tsx new file mode 100644 index 00000000..5bb52218 --- /dev/null +++ b/src/data-table/data-table-header-cell.tsx @@ -0,0 +1,14 @@ +import React from 'react'; + +import {TableHeaderCell} from '..'; + +import {useColummnConfiguration} from './column-configuration'; + +export type DataTableHeaderCellProps = { + name: string; +}; + +export const DataTableHeaderCell = ({name}: DataTableHeaderCellProps) => { + const {label} = useColummnConfiguration(name); + return {label}; +}; diff --git a/src/data-table/data-table.stories.tsx b/src/data-table/data-table.stories.tsx new file mode 100644 index 00000000..b73ef76b --- /dev/null +++ b/src/data-table/data-table.stories.tsx @@ -0,0 +1,85 @@ +import React from 'react'; + +import {makeComplexPeople, makeSimplePeople} from '../mocks'; + +import {DataTable} from '.'; + +export default { + component: DataTable, + title: 'Primitives/DataTable', +}; + +const simpleData = makeSimplePeople(); + +export const dataTable = () => ( + ( + + + + + + {/* @ts-expect-error - this is here to prove we get an error if we use an invalid column*/} + + + )} + /> +); + +const complexData = makeComplexPeople(); + +export const nestedDataTable = () => ( + ( + + ( + + + + + )} + /> + + + + )} + /> +); + +/** + * Just here for testing TypeScript. Does not demonstrate anything interesting in storybook. + */ +export const nestedDataTableForTesting = () => ( + ( + + ( + + + + + + )} + /> + + + + + )} + /> +); diff --git a/src/data-table/data-table.tsx b/src/data-table/data-table.tsx new file mode 100644 index 00000000..e9ea33dc --- /dev/null +++ b/src/data-table/data-table.tsx @@ -0,0 +1,83 @@ +import React from 'react'; + +import {Table, TableBody, TableHeader, TableRow} from '..'; + +import { + ColumnConfigurationProvider, + useConfiguredColumnNames, +} from './column-configuration'; +import {ColumnRenderer} from './column-renderer'; +import {DataTableBodyCell} from './data-table-body-cell'; +import {DataTableHeaderCell} from './data-table-header-cell'; +import {getColumnData} from './support'; +import {RenderProps} from './types'; + +export type DataTableInnerProps = { + data: T[]; + idColumn: keyof T; +}; + +export const DataTableInner = ({ + data, + idColumn, +}: DataTableInnerProps) => { + const configuredColumns = useConfiguredColumnNames(); + return ( + + + + {configuredColumns.map((name) => ( + + ))} + + + {data.map((rowData, index) => { + let key = String(rowData[idColumn]); + if (typeof key === 'undefined' || key === null) { + if (process.env.NODE_ENV !== 'production') { + console.error( + 'idColumn does not identify a field with a value. Falling back to array index for React key' + ); + } + key = String(index); + } + + return ( + + {configuredColumns.map((name) => ( + + ))} + + ); + })} + +
+ + ); +}; + +export type DataTableProps = { + data: T[]; + idColumn?: keyof T; + render: React.ComponentType>; +}; + +export const DataTable = ({ + data, + // @ts-expect-error - this isn't perfect; we might have data that uses + // something other than `id`, but it's better than forcing folks to set it + // every time. + idColumn = 'id', + render: Render, +}: DataTableProps) => { + return ( + + + + + ); +}; diff --git a/src/data-table/index.tsx b/src/data-table/index.tsx new file mode 100644 index 00000000..fb0ea7ea --- /dev/null +++ b/src/data-table/index.tsx @@ -0,0 +1 @@ +export * from './data-table'; diff --git a/src/data-table/support.spec.ts b/src/data-table/support.spec.ts new file mode 100644 index 00000000..c9e5bce4 --- /dev/null +++ b/src/data-table/support.spec.ts @@ -0,0 +1,27 @@ +import {makeComplexPerson, makeSimplePerson} from '../mocks'; + +import {getColumnData} from './support'; + +describe('getColumnData()', () => { + it('returns non-nested data', () => { + const rowData = makeSimplePerson(); + + expect(getColumnData(rowData, 'age')).toBe(rowData.age); + expect(getColumnData(rowData, 'firstName')).toBe(rowData.firstName); + expect(() => { + getColumnData(rowData, 'foo'); + }).not.toThrow(); + expect(getColumnData(rowData, 'foo')).toBe(undefined); + }); + + it('returns nested data', () => { + const rowData = makeComplexPerson(); + + expect(getColumnData(rowData, 'age')).toBe(rowData.age); + expect(getColumnData(rowData, 'name.first')).toBe(rowData.name.first); + expect(() => { + getColumnData(rowData, 'name.foo'); + }).not.toThrow(); + expect(getColumnData(rowData, 'name.foo')).toBe(undefined); + }); +}); diff --git a/src/data-table/support.ts b/src/data-table/support.ts new file mode 100644 index 00000000..0f7f0b25 --- /dev/null +++ b/src/data-table/support.ts @@ -0,0 +1,29 @@ +const pattern = /^(\w+)\.(.+)$/; + +/** + * Extracts data from an object using dotted keypaths. Does not support arrays + * or array notation + */ +export function getColumnData(rowData: unknown, keyPath: string): unknown { + if (!keyPath) { + return rowData; + } + + if (typeof rowData !== 'object') { + return null; + } + + if (rowData === null) { + return null; + } + + const match = keyPath.match(pattern); + if (match) { + const [_, key, rest] = match; + // @ts-expect-error + return getColumnData(rowData[key], rest); + } + + // @ts-expect-error + return rowData[keyPath]; +} diff --git a/src/data-table/types.ts b/src/data-table/types.ts new file mode 100644 index 00000000..e1fd42fb --- /dev/null +++ b/src/data-table/types.ts @@ -0,0 +1,21 @@ +export type StringKey = Extract; +export type IdType = StringKey; + +export interface RenderProps { + // ideally, this would be ComponentType, but I don't think typescript syntax + // will let me template anything by a function (or maybe a class). + FieldRenderer: >( + props: FieldRendererProps + ) => JSX.Element | null; +} + +export type FieldRendererProps> = { + name: K; + label?: React.ReactNode; + render?: T[K] extends object ? React.ComponentType> : never; +}; + +export type FieldRenderer< + T extends object, + K extends IdType +> = React.ComponentType>; diff --git a/src/index.tsx b/src/index.tsx index c2fd82b8..f6b875f7 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,6 +1,7 @@ export * from './alert'; export * from './card'; export * from './code'; +export * from './data-table'; export * from './description'; export * from './link'; export * from './markdown'; diff --git a/src/table/__snapshots__/table.stories.storyshot b/src/table/__snapshots__/table.stories.storyshot index 582a735f..55172ed5 100644 --- a/src/table/__snapshots__/table.stories.storyshot +++ b/src/table/__snapshots__/table.stories.storyshot @@ -23,951 +23,951 @@ exports[`Storyshots Components/Table Complex Table 1`] = ` - Destiney + Avery - Schaden + O'Connell - 90 + 84 - Garrick + Mariana - Bashirian + Altenwerth - 19 + 92 - Osbaldo + Raoul - Bartoletti + Koch - 67 + 76 - Izabella + Destiney - Beier + Klocko - 14 + 84 - Abe + Karlee - Ferry + Bradtke - 58 + 43 - Carlos + Gia - Schultz + Mills - 10 + 37 - Santiago + Sibyl - Pollich + Morissette - 34 + 44 - Kiana + Alden - Hoppe + Stokes - 94 + 50 - Anita + Eloisa - Russel + Mueller - 35 + 78 - Isabell + Manuel - Wilkinson + Jacobi - 10 + 93 - Elva + Bettye - Kunze + Satterfield - 99 + 76 - Benjamin + Kenneth - Kunze + Stehr - 54 + 0 - Tianna + Garret - Rippin + Hermiston - 35 + 76 - Audie + Felix - Pollich + Kunze - 89 + 91 - Garnett + Orpha - Daugherty + Konopelski - 13 + 6 - Janie + Riley - Miller + Dicki - 32 + 28 - Macy + Maria - Haley + Pfannerstill - 69 + 83 - Alice + Arlie - McClure + Osinski - 60 + 75 - Ara + Drew - Fritsch + Goodwin - 65 + 85 - Leonora + Cielo - Bayer + Turcotte - 68 + 58 - Corrine + Richie - Beier + Dooley - 35 + 44 - Tyshawn + Carole - Schneider + Macejkovic - 26 + 47 - Daron + Tressa - Greenholt + Hagenes - 77 + 61 - Jaycee + Constantin - Zemlak + Jacobson - 31 + 100 - Aryanna + Landen - Zieme + Turner - 88 + 46 - Lori + Gerry - Donnelly + Hudson - 20 + 50 - Kaley + Franco - Wehner + Brown - 63 + 23 - Jadyn + Devon - Goodwin + Bogan - 75 + 36 - Lavinia + Concepcion - Hayes + Hammes - 100 + 60 - Elfrieda + Roy - Heller + Hand - 13 + 94 - Harry + Lafayette - Nienow + Hammes - 90 + 4 - Heaven + Telly - Roberts + Boyer - 65 + 48 - Monserrat + Tamara - Quigley + Nicolas - 11 + 25 - Ardella + Ima - Green + Tromp - 95 + 7 - Brenna + Vicente - Zboncak + Kautzer - 54 + 88 - Mike + Easter - O'Keefe + Grady - 5 + 48 - Alvena + Lexie - Mohr + Brown - 83 + 55 - Dariana + Alycia - Heaney + Lehner - 82 + 56 - Kailey + Kathlyn - White + Stamm - 50 + 53 - Savanah + Imogene - Dibbert + Morar - 81 + 68 - Estevan + Darron - Pfannerstill + Friesen - 58 + 47 - Celestino + Jaylan - Spinka + Deckow - 68 + 87 - Arjun + Lonnie - Treutel + Mosciski - 34 + 88 - Travon + Eliane - Yundt + Rogahn - 79 + 66 - Matt + Serena - Wunsch + Torp - 4 + 80 - Haylie + Alene - Johnson + Hilll - 1 + 31 - Prince + Darian - Reinger + Fadel - 37 + 12 - Rollin + Torey - Olson + Wisozk - 90 + 9 - Nicole + Clementine - Grant + Orn - 18 + 17 - Eileen + Durward - Hauck + Cruickshank - 34 + 10 @@ -998,951 +998,951 @@ exports[`Storyshots Components/Table Table 1`] = ` - Joshua + Nikki - Buckridge + Champlin - 9 + 38 - Justyn + Mohammad - Kshlerin + Simonis - 52 + 45 - Jarred + Leanne - Simonis + Feeney - 88 + 36 - Darlene + Alycia - Bogisich + Hodkiewicz - 21 + 59 - Mose + Curtis - Parker + Walter - 98 + 72 - Renee + Polly - Dach + Streich - 33 + 32 - Kaylee + Marcella - Hodkiewicz + Dicki - 33 + 28 - Celestine + Maureen - Ankunding + Hickle - 94 + 5 - Hannah + Reanna - Connelly + Dach - 72 + 55 - Elwin + Nicole - Wilkinson + Hettinger - 61 + 67 - Karley + Laury - Olson + Murray - 83 + 70 - Roger + Gudrun - Emmerich + Reinger - 60 + 73 - Jude + Darion - Rosenbaum + Williamson - 12 + 28 - Cody + Elta - Kiehn + Herman - 56 + 71 - Vivianne + Amani - Kub + Wyman - 94 + 35 - Celestino + Leanne - Beahan + Von - 90 + 71 - Albert + Lennie - Hane + Waters - 37 + 54 - Lucious + Marcus - VonRueden + Dare - 48 + 96 - Ike + Brandon - Hills + Wilkinson - 2 + 82 - Donnie + Camden - Mosciski + Armstrong - 98 + 24 - Herbert + Emilio - Strosin + Kilback - 66 + 76 - Gabrielle + Jalon - Robel + Ullrich - 22 + 75 - Roselyn + Ayden - Rohan + Deckow - 4 + 71 - Solon + Tyrell - Nienow + Crona - 20 + 68 - Lambert + Ricky - Dickens + Mante - 42 + 100 - Nickolas + Orlando - Erdman + Raynor - 4 + 86 - Emelia + Jermain - Bergstrom + D'Amore - 8 + 94 - Kevon + Hector - Stark + Gutkowski - 8 + 75 - Corine + Kristin - Yost + Herzog - 89 + 31 - Estel + Marilie - Welch + Sauer - 68 + 93 - Curtis + Lazaro - O'Keefe + Wolff - 87 + 10 - Myra + Antonio - Labadie + Mills - 9 + 34 - Orin + Karlie - Zemlak + Hagenes - 16 + 61 - Serenity + Madyson - Labadie + Bruen - 4 + 17 - Coty + Brenden - Hamill + Waters - 100 + 69 - Foster + Alexanne - Bauch + Cummerata - 83 + 73 - Mozelle + Isaias - Lowe + Reynolds - 87 + 81 - Tia + Kurt - McDermott + Corwin - 24 + 68 - Lynn + Consuelo - Strosin + Blick - 15 + 84 - Garrett + Terrance - Moore + Luettgen - 81 + 78 - Effie + Dewitt Ruecker - 53 + 11 - Vernice + Maximillian - Dickinson + Will - 99 + 86 - Bertram + Ashley - Kuphal + Keebler - 25 + 74 - Oceane + Erling - Schowalter + Schmitt - 57 + 10 - Cedrick + Vilma - Hagenes + Orn - 24 + 76 - Kayley + Adella - O'Reilly + Kilback - 39 + 75 - Keshawn + Dimitri - Roberts + Glover - 38 + 76 - Frieda + Cleveland - Satterfield + Willms - 27 + 61 - Wilbert + Bernardo - Kunze + Stark - 83 + 72 - Idell + Devyn - Lemke + Schultz - 77 + 6