From 390d2ae8f5db4828d1890c16db1ced2752a15782 Mon Sep 17 00:00:00 2001 From: ianwremmel <1182361+ianwremmel@users.noreply.github.com> Date: Sun, 4 Oct 2020 10:03:51 -0700 Subject: [PATCH 1/6] feat(data-table): add types and stories (but no implementation) --- .../data-table.stories.storyshot | 719 ++++++++++ src/data-table/data-table.stories.tsx | 55 + src/data-table/data-table.tsx | 14 + src/data-table/index.tsx | 1 + src/data-table/types.ts | 18 + src/index.tsx | 1 + .../__snapshots__/table.stories.storyshot | 1198 ++++++++--------- 7 files changed, 1407 insertions(+), 599 deletions(-) create mode 100644 src/data-table/__snapshots__/data-table.stories.storyshot create mode 100644 src/data-table/data-table.stories.tsx create mode 100644 src/data-table/data-table.tsx create mode 100644 src/data-table/index.tsx create mode 100644 src/data-table/types.ts 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..80c923fc --- /dev/null +++ b/src/data-table/__snapshots__/data-table.stories.storyshot @@ -0,0 +1,719 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots Primitives/DataTable Data Table 1`] = ` +
+  {
+  "data": [
+    {
+      "age": 9,
+      "firstName": "Joshua",
+      "lastName": "Buckridge",
+      "signUpDate": "2020-09-29T06:39:15.478Z"
+    },
+    {
+      "age": 52,
+      "firstName": "Justyn",
+      "lastName": "Kshlerin",
+      "signUpDate": "2020-08-27T01:47:43.013Z"
+    },
+    {
+      "age": 88,
+      "firstName": "Jarred",
+      "lastName": "Simonis",
+      "signUpDate": "2021-01-20T09:45:23.686Z"
+    },
+    {
+      "age": 21,
+      "firstName": "Darlene",
+      "lastName": "Bogisich",
+      "signUpDate": "2020-04-15T07:09:51.147Z"
+    },
+    {
+      "age": 98,
+      "firstName": "Mose",
+      "lastName": "Parker",
+      "signUpDate": "2019-11-19T16:05:25.388Z"
+    },
+    {
+      "age": 33,
+      "firstName": "Renee",
+      "lastName": "Dach",
+      "signUpDate": "2019-09-13T15:40:38.366Z"
+    },
+    {
+      "age": 33,
+      "firstName": "Kaylee",
+      "lastName": "Hodkiewicz",
+      "signUpDate": "2020-01-07T17:33:28.797Z"
+    },
+    {
+      "age": 94,
+      "firstName": "Celestine",
+      "lastName": "Ankunding",
+      "signUpDate": "2020-10-11T15:19:06.363Z"
+    },
+    {
+      "age": 72,
+      "firstName": "Hannah",
+      "lastName": "Connelly",
+      "signUpDate": "2020-06-29T11:23:24.282Z"
+    },
+    {
+      "age": 61,
+      "firstName": "Elwin",
+      "lastName": "Wilkinson",
+      "signUpDate": "2019-11-03T06:29:20.579Z"
+    },
+    {
+      "age": 83,
+      "firstName": "Karley",
+      "lastName": "Olson",
+      "signUpDate": "2020-07-13T18:26:51.751Z"
+    },
+    {
+      "age": 60,
+      "firstName": "Roger",
+      "lastName": "Emmerich",
+      "signUpDate": "2019-04-02T00:20:20.223Z"
+    },
+    {
+      "age": 12,
+      "firstName": "Jude",
+      "lastName": "Rosenbaum",
+      "signUpDate": "2020-04-27T22:57:02.343Z"
+    },
+    {
+      "age": 56,
+      "firstName": "Cody",
+      "lastName": "Kiehn",
+      "signUpDate": "2020-06-17T07:20:03.530Z"
+    },
+    {
+      "age": 94,
+      "firstName": "Vivianne",
+      "lastName": "Kub",
+      "signUpDate": "2021-02-25T10:34:34.502Z"
+    },
+    {
+      "age": 90,
+      "firstName": "Celestino",
+      "lastName": "Beahan",
+      "signUpDate": "2019-05-07T22:40:56.293Z"
+    },
+    {
+      "age": 37,
+      "firstName": "Albert",
+      "lastName": "Hane",
+      "signUpDate": "2020-07-14T21:39:56.615Z"
+    },
+    {
+      "age": 48,
+      "firstName": "Lucious",
+      "lastName": "VonRueden",
+      "signUpDate": "2020-09-04T12:53:16.276Z"
+    },
+    {
+      "age": 2,
+      "firstName": "Ike",
+      "lastName": "Hills",
+      "signUpDate": "2020-04-11T05:40:51.435Z"
+    },
+    {
+      "age": 98,
+      "firstName": "Donnie",
+      "lastName": "Mosciski",
+      "signUpDate": "2020-07-01T04:49:26.057Z"
+    },
+    {
+      "age": 66,
+      "firstName": "Herbert",
+      "lastName": "Strosin",
+      "signUpDate": "2019-03-27T04:37:10.953Z"
+    },
+    {
+      "age": 22,
+      "firstName": "Gabrielle",
+      "lastName": "Robel",
+      "signUpDate": "2019-12-16T14:12:21.778Z"
+    },
+    {
+      "age": 4,
+      "firstName": "Roselyn",
+      "lastName": "Rohan",
+      "signUpDate": "2019-09-05T19:43:39.114Z"
+    },
+    {
+      "age": 20,
+      "firstName": "Solon",
+      "lastName": "Nienow",
+      "signUpDate": "2020-10-16T02:28:43.106Z"
+    },
+    {
+      "age": 42,
+      "firstName": "Lambert",
+      "lastName": "Dickens",
+      "signUpDate": "2019-05-30T10:28:57.098Z"
+    },
+    {
+      "age": 4,
+      "firstName": "Nickolas",
+      "lastName": "Erdman",
+      "signUpDate": "2020-06-06T01:29:38.998Z"
+    },
+    {
+      "age": 8,
+      "firstName": "Emelia",
+      "lastName": "Bergstrom",
+      "signUpDate": "2020-07-19T05:45:55.342Z"
+    },
+    {
+      "age": 8,
+      "firstName": "Kevon",
+      "lastName": "Stark",
+      "signUpDate": "2019-04-30T07:31:57.161Z"
+    },
+    {
+      "age": 89,
+      "firstName": "Corine",
+      "lastName": "Yost",
+      "signUpDate": "2019-10-18T13:27:06.175Z"
+    },
+    {
+      "age": 68,
+      "firstName": "Estel",
+      "lastName": "Welch",
+      "signUpDate": "2020-12-19T08:32:21.789Z"
+    },
+    {
+      "age": 87,
+      "firstName": "Curtis",
+      "lastName": "O'Keefe",
+      "signUpDate": "2019-12-03T00:57:58.831Z"
+    },
+    {
+      "age": 9,
+      "firstName": "Myra",
+      "lastName": "Labadie",
+      "signUpDate": "2019-11-27T14:43:41.936Z"
+    },
+    {
+      "age": 16,
+      "firstName": "Orin",
+      "lastName": "Zemlak",
+      "signUpDate": "2019-11-14T18:17:14.250Z"
+    },
+    {
+      "age": 4,
+      "firstName": "Serenity",
+      "lastName": "Labadie",
+      "signUpDate": "2020-08-25T06:54:25.876Z"
+    },
+    {
+      "age": 100,
+      "firstName": "Coty",
+      "lastName": "Hamill",
+      "signUpDate": "2020-10-04T14:50:38.937Z"
+    },
+    {
+      "age": 83,
+      "firstName": "Foster",
+      "lastName": "Bauch",
+      "signUpDate": "2020-02-01T14:58:39.799Z"
+    },
+    {
+      "age": 87,
+      "firstName": "Mozelle",
+      "lastName": "Lowe",
+      "signUpDate": "2019-12-31T15:45:14.245Z"
+    },
+    {
+      "age": 24,
+      "firstName": "Tia",
+      "lastName": "McDermott",
+      "signUpDate": "2020-12-30T14:40:16.915Z"
+    },
+    {
+      "age": 15,
+      "firstName": "Lynn",
+      "lastName": "Strosin",
+      "signUpDate": "2019-04-03T05:44:40.460Z"
+    },
+    {
+      "age": 81,
+      "firstName": "Garrett",
+      "lastName": "Moore",
+      "signUpDate": "2019-07-26T09:11:10.666Z"
+    },
+    {
+      "age": 53,
+      "firstName": "Effie",
+      "lastName": "Ruecker",
+      "signUpDate": "2019-04-02T17:38:02.820Z"
+    },
+    {
+      "age": 99,
+      "firstName": "Vernice",
+      "lastName": "Dickinson",
+      "signUpDate": "2021-01-08T06:51:48.544Z"
+    },
+    {
+      "age": 25,
+      "firstName": "Bertram",
+      "lastName": "Kuphal",
+      "signUpDate": "2019-02-04T23:37:08.588Z"
+    },
+    {
+      "age": 57,
+      "firstName": "Oceane",
+      "lastName": "Schowalter",
+      "signUpDate": "2020-12-11T03:04:06.672Z"
+    },
+    {
+      "age": 24,
+      "firstName": "Cedrick",
+      "lastName": "Hagenes",
+      "signUpDate": "2019-03-28T15:24:55.254Z"
+    },
+    {
+      "age": 39,
+      "firstName": "Kayley",
+      "lastName": "O'Reilly",
+      "signUpDate": "2019-05-09T19:43:13.704Z"
+    },
+    {
+      "age": 38,
+      "firstName": "Keshawn",
+      "lastName": "Roberts",
+      "signUpDate": "2019-01-26T13:27:33.379Z"
+    },
+    {
+      "age": 27,
+      "firstName": "Frieda",
+      "lastName": "Satterfield",
+      "signUpDate": "2020-04-13T12:48:58.216Z"
+    },
+    {
+      "age": 83,
+      "firstName": "Wilbert",
+      "lastName": "Kunze",
+      "signUpDate": "2020-10-02T00:08:42.715Z"
+    },
+    {
+      "age": 77,
+      "firstName": "Idell",
+      "lastName": "Lemke",
+      "signUpDate": "2020-11-23T09:26:13.764Z"
+    }
+  ]
+}
+
+`; + +exports[`Storyshots Primitives/DataTable Nested Data Table 1`] = ` +
+  {
+  "data": [
+    {
+      "age": 90,
+      "name": {
+        "first": "Destiney",
+        "last": "Schaden"
+      },
+      "signUpDate": "2020-11-16T06:01:56.359Z"
+    },
+    {
+      "age": 19,
+      "name": {
+        "first": "Garrick",
+        "last": "Bashirian"
+      },
+      "signUpDate": "2020-11-27T19:39:51.841Z"
+    },
+    {
+      "age": 67,
+      "name": {
+        "first": "Osbaldo",
+        "last": "Bartoletti"
+      },
+      "signUpDate": "2020-02-14T19:35:04.750Z"
+    },
+    {
+      "age": 14,
+      "name": {
+        "first": "Izabella",
+        "last": "Beier"
+      },
+      "signUpDate": "2019-05-29T10:58:26.801Z"
+    },
+    {
+      "age": 58,
+      "name": {
+        "first": "Abe",
+        "last": "Ferry"
+      },
+      "signUpDate": "2019-12-27T18:44:50.032Z"
+    },
+    {
+      "age": 10,
+      "name": {
+        "first": "Carlos",
+        "last": "Schultz"
+      },
+      "signUpDate": "2019-03-28T07:47:31.604Z"
+    },
+    {
+      "age": 34,
+      "name": {
+        "first": "Santiago",
+        "last": "Pollich"
+      },
+      "signUpDate": "2019-06-11T05:42:03.447Z"
+    },
+    {
+      "age": 94,
+      "name": {
+        "first": "Kiana",
+        "last": "Hoppe"
+      },
+      "signUpDate": "2019-02-04T13:39:16.378Z"
+    },
+    {
+      "age": 35,
+      "name": {
+        "first": "Anita",
+        "last": "Russel"
+      },
+      "signUpDate": "2019-02-06T02:08:11.807Z"
+    },
+    {
+      "age": 10,
+      "name": {
+        "first": "Isabell",
+        "last": "Wilkinson"
+      },
+      "signUpDate": "2019-05-25T20:03:23.610Z"
+    },
+    {
+      "age": 99,
+      "name": {
+        "first": "Elva",
+        "last": "Kunze"
+      },
+      "signUpDate": "2019-05-08T05:15:53.193Z"
+    },
+    {
+      "age": 54,
+      "name": {
+        "first": "Benjamin",
+        "last": "Kunze"
+      },
+      "signUpDate": "2020-10-12T18:58:37.702Z"
+    },
+    {
+      "age": 35,
+      "name": {
+        "first": "Tianna",
+        "last": "Rippin"
+      },
+      "signUpDate": "2019-05-02T14:35:59.935Z"
+    },
+    {
+      "age": 89,
+      "name": {
+        "first": "Audie",
+        "last": "Pollich"
+      },
+      "signUpDate": "2019-10-10T00:47:20.986Z"
+    },
+    {
+      "age": 13,
+      "name": {
+        "first": "Garnett",
+        "last": "Daugherty"
+      },
+      "signUpDate": "2020-05-13T10:09:28.956Z"
+    },
+    {
+      "age": 32,
+      "name": {
+        "first": "Janie",
+        "last": "Miller"
+      },
+      "signUpDate": "2020-04-16T20:15:45.128Z"
+    },
+    {
+      "age": 69,
+      "name": {
+        "first": "Macy",
+        "last": "Haley"
+      },
+      "signUpDate": "2019-03-12T17:56:35.849Z"
+    },
+    {
+      "age": 60,
+      "name": {
+        "first": "Alice",
+        "last": "McClure"
+      },
+      "signUpDate": "2019-07-07T07:09:53.803Z"
+    },
+    {
+      "age": 65,
+      "name": {
+        "first": "Ara",
+        "last": "Fritsch"
+      },
+      "signUpDate": "2019-05-20T00:08:06.085Z"
+    },
+    {
+      "age": 68,
+      "name": {
+        "first": "Leonora",
+        "last": "Bayer"
+      },
+      "signUpDate": "2019-03-26T10:22:53.934Z"
+    },
+    {
+      "age": 35,
+      "name": {
+        "first": "Corrine",
+        "last": "Beier"
+      },
+      "signUpDate": "2020-11-17T11:35:28.797Z"
+    },
+    {
+      "age": 26,
+      "name": {
+        "first": "Tyshawn",
+        "last": "Schneider"
+      },
+      "signUpDate": "2020-11-18T22:44:05.602Z"
+    },
+    {
+      "age": 77,
+      "name": {
+        "first": "Daron",
+        "last": "Greenholt"
+      },
+      "signUpDate": "2020-09-24T08:40:48.045Z"
+    },
+    {
+      "age": 31,
+      "name": {
+        "first": "Jaycee",
+        "last": "Zemlak"
+      },
+      "signUpDate": "2019-06-25T18:23:27.901Z"
+    },
+    {
+      "age": 88,
+      "name": {
+        "first": "Aryanna",
+        "last": "Zieme"
+      },
+      "signUpDate": "2020-03-26T07:05:01.026Z"
+    },
+    {
+      "age": 20,
+      "name": {
+        "first": "Lori",
+        "last": "Donnelly"
+      },
+      "signUpDate": "2019-04-25T20:08:53.608Z"
+    },
+    {
+      "age": 63,
+      "name": {
+        "first": "Kaley",
+        "last": "Wehner"
+      },
+      "signUpDate": "2020-08-01T08:22:39.739Z"
+    },
+    {
+      "age": 75,
+      "name": {
+        "first": "Jadyn",
+        "last": "Goodwin"
+      },
+      "signUpDate": "2020-06-24T16:56:30.607Z"
+    },
+    {
+      "age": 100,
+      "name": {
+        "first": "Lavinia",
+        "last": "Hayes"
+      },
+      "signUpDate": "2020-07-08T18:11:42.919Z"
+    },
+    {
+      "age": 13,
+      "name": {
+        "first": "Elfrieda",
+        "last": "Heller"
+      },
+      "signUpDate": "2020-11-12T08:41:45.341Z"
+    },
+    {
+      "age": 90,
+      "name": {
+        "first": "Harry",
+        "last": "Nienow"
+      },
+      "signUpDate": "2020-06-14T14:52:48.582Z"
+    },
+    {
+      "age": 65,
+      "name": {
+        "first": "Heaven",
+        "last": "Roberts"
+      },
+      "signUpDate": "2019-01-14T03:41:47.716Z"
+    },
+    {
+      "age": 11,
+      "name": {
+        "first": "Monserrat",
+        "last": "Quigley"
+      },
+      "signUpDate": "2020-06-27T14:56:15.878Z"
+    },
+    {
+      "age": 95,
+      "name": {
+        "first": "Ardella",
+        "last": "Green"
+      },
+      "signUpDate": "2020-11-18T03:07:37.125Z"
+    },
+    {
+      "age": 54,
+      "name": {
+        "first": "Brenna",
+        "last": "Zboncak"
+      },
+      "signUpDate": "2019-05-14T03:12:23.351Z"
+    },
+    {
+      "age": 5,
+      "name": {
+        "first": "Mike",
+        "last": "O'Keefe"
+      },
+      "signUpDate": "2019-08-11T20:54:29.510Z"
+    },
+    {
+      "age": 83,
+      "name": {
+        "first": "Alvena",
+        "last": "Mohr"
+      },
+      "signUpDate": "2020-03-21T09:26:22.702Z"
+    },
+    {
+      "age": 82,
+      "name": {
+        "first": "Dariana",
+        "last": "Heaney"
+      },
+      "signUpDate": "2019-05-22T22:51:41.863Z"
+    },
+    {
+      "age": 50,
+      "name": {
+        "first": "Kailey",
+        "last": "White"
+      },
+      "signUpDate": "2020-05-30T19:04:58.819Z"
+    },
+    {
+      "age": 81,
+      "name": {
+        "first": "Savanah",
+        "last": "Dibbert"
+      },
+      "signUpDate": "2020-10-01T02:08:27.583Z"
+    },
+    {
+      "age": 58,
+      "name": {
+        "first": "Estevan",
+        "last": "Pfannerstill"
+      },
+      "signUpDate": "2019-09-01T01:52:28.661Z"
+    },
+    {
+      "age": 68,
+      "name": {
+        "first": "Celestino",
+        "last": "Spinka"
+      },
+      "signUpDate": "2019-04-08T02:34:10.976Z"
+    },
+    {
+      "age": 34,
+      "name": {
+        "first": "Arjun",
+        "last": "Treutel"
+      },
+      "signUpDate": "2019-08-05T18:49:24.213Z"
+    },
+    {
+      "age": 79,
+      "name": {
+        "first": "Travon",
+        "last": "Yundt"
+      },
+      "signUpDate": "2019-11-01T14:31:14.834Z"
+    },
+    {
+      "age": 4,
+      "name": {
+        "first": "Matt",
+        "last": "Wunsch"
+      },
+      "signUpDate": "2020-03-31T04:12:04.011Z"
+    },
+    {
+      "age": 1,
+      "name": {
+        "first": "Haylie",
+        "last": "Johnson"
+      },
+      "signUpDate": "2020-01-18T01:44:02.063Z"
+    },
+    {
+      "age": 37,
+      "name": {
+        "first": "Prince",
+        "last": "Reinger"
+      },
+      "signUpDate": "2021-01-05T14:54:22.171Z"
+    },
+    {
+      "age": 90,
+      "name": {
+        "first": "Rollin",
+        "last": "Olson"
+      },
+      "signUpDate": "2019-12-15T03:32:21.192Z"
+    },
+    {
+      "age": 18,
+      "name": {
+        "first": "Nicole",
+        "last": "Grant"
+      },
+      "signUpDate": "2019-03-22T11:29:37.737Z"
+    },
+    {
+      "age": 34,
+      "name": {
+        "first": "Eileen",
+        "last": "Hauck"
+      },
+      "signUpDate": "2020-07-31T21:33:20.697Z"
+    }
+  ]
+}
+
+`; diff --git a/src/data-table/data-table.stories.tsx b/src/data-table/data-table.stories.tsx new file mode 100644 index 00000000..140f5b0f --- /dev/null +++ b/src/data-table/data-table.stories.tsx @@ -0,0 +1,55 @@ +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 */} + + + )} + /> +); + +const complexData = makeComplexPeople(); + +export const nestedDataTable = () => ( + ( + + ( + + + + {/* @ts-expect-error */} + + + )} + /> + + + {/* @ts-expect-error */} + + + )} + /> +); diff --git a/src/data-table/data-table.tsx b/src/data-table/data-table.tsx new file mode 100644 index 00000000..2fabaacd --- /dev/null +++ b/src/data-table/data-table.tsx @@ -0,0 +1,14 @@ +import React from 'react'; + +import {RenderProps} from './types'; + +export type DataTableProps = { + data: T[]; + render: React.ComponentType>; +}; + +export const DataTable = (props: DataTableProps) => ( + <> + 
{JSON.stringify(props, null, 2)}
+ +); 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/types.ts b/src/data-table/types.ts new file mode 100644 index 00000000..c048312c --- /dev/null +++ b/src/data-table/types.ts @@ -0,0 +1,18 @@ +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 keyof T +> = 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 From f0a15bfc0129860475d6c91a8ce289f5826c8e24 Mon Sep 17 00:00:00 2001 From: ianwremmel <1182361+ianwremmel@users.noreply.github.com> Date: Sun, 4 Oct 2020 11:57:20 -0700 Subject: [PATCH 2/6] feat(data-table): configure tables with flat data --- .../data-table.stories.storyshot | 3355 +++++++++++++---- src/data-table/column-configuration.tsx | 86 + src/data-table/column-renderer.tsx | 13 + src/data-table/data-table-body-cell.tsx | 22 + src/data-table/data-table-header-cell.tsx | 14 + src/data-table/data-table.tsx | 59 +- src/data-table/types.ts | 9 +- 7 files changed, 2838 insertions(+), 720 deletions(-) create mode 100644 src/data-table/column-configuration.tsx create mode 100644 src/data-table/column-renderer.tsx create mode 100644 src/data-table/data-table-body-cell.tsx create mode 100644 src/data-table/data-table-header-cell.tsx diff --git a/src/data-table/__snapshots__/data-table.stories.storyshot b/src/data-table/__snapshots__/data-table.stories.storyshot index 80c923fc..b2073a19 100644 --- a/src/data-table/__snapshots__/data-table.stories.storyshot +++ b/src/data-table/__snapshots__/data-table.stories.storyshot @@ -1,719 +1,2650 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Storyshots Primitives/DataTable Data Table 1`] = ` -
-  {
-  "data": [
-    {
-      "age": 9,
-      "firstName": "Joshua",
-      "lastName": "Buckridge",
-      "signUpDate": "2020-09-29T06:39:15.478Z"
-    },
-    {
-      "age": 52,
-      "firstName": "Justyn",
-      "lastName": "Kshlerin",
-      "signUpDate": "2020-08-27T01:47:43.013Z"
-    },
-    {
-      "age": 88,
-      "firstName": "Jarred",
-      "lastName": "Simonis",
-      "signUpDate": "2021-01-20T09:45:23.686Z"
-    },
-    {
-      "age": 21,
-      "firstName": "Darlene",
-      "lastName": "Bogisich",
-      "signUpDate": "2020-04-15T07:09:51.147Z"
-    },
-    {
-      "age": 98,
-      "firstName": "Mose",
-      "lastName": "Parker",
-      "signUpDate": "2019-11-19T16:05:25.388Z"
-    },
-    {
-      "age": 33,
-      "firstName": "Renee",
-      "lastName": "Dach",
-      "signUpDate": "2019-09-13T15:40:38.366Z"
-    },
-    {
-      "age": 33,
-      "firstName": "Kaylee",
-      "lastName": "Hodkiewicz",
-      "signUpDate": "2020-01-07T17:33:28.797Z"
-    },
-    {
-      "age": 94,
-      "firstName": "Celestine",
-      "lastName": "Ankunding",
-      "signUpDate": "2020-10-11T15:19:06.363Z"
-    },
-    {
-      "age": 72,
-      "firstName": "Hannah",
-      "lastName": "Connelly",
-      "signUpDate": "2020-06-29T11:23:24.282Z"
-    },
-    {
-      "age": 61,
-      "firstName": "Elwin",
-      "lastName": "Wilkinson",
-      "signUpDate": "2019-11-03T06:29:20.579Z"
-    },
-    {
-      "age": 83,
-      "firstName": "Karley",
-      "lastName": "Olson",
-      "signUpDate": "2020-07-13T18:26:51.751Z"
-    },
-    {
-      "age": 60,
-      "firstName": "Roger",
-      "lastName": "Emmerich",
-      "signUpDate": "2019-04-02T00:20:20.223Z"
-    },
-    {
-      "age": 12,
-      "firstName": "Jude",
-      "lastName": "Rosenbaum",
-      "signUpDate": "2020-04-27T22:57:02.343Z"
-    },
-    {
-      "age": 56,
-      "firstName": "Cody",
-      "lastName": "Kiehn",
-      "signUpDate": "2020-06-17T07:20:03.530Z"
-    },
-    {
-      "age": 94,
-      "firstName": "Vivianne",
-      "lastName": "Kub",
-      "signUpDate": "2021-02-25T10:34:34.502Z"
-    },
-    {
-      "age": 90,
-      "firstName": "Celestino",
-      "lastName": "Beahan",
-      "signUpDate": "2019-05-07T22:40:56.293Z"
-    },
-    {
-      "age": 37,
-      "firstName": "Albert",
-      "lastName": "Hane",
-      "signUpDate": "2020-07-14T21:39:56.615Z"
-    },
-    {
-      "age": 48,
-      "firstName": "Lucious",
-      "lastName": "VonRueden",
-      "signUpDate": "2020-09-04T12:53:16.276Z"
-    },
-    {
-      "age": 2,
-      "firstName": "Ike",
-      "lastName": "Hills",
-      "signUpDate": "2020-04-11T05:40:51.435Z"
-    },
-    {
-      "age": 98,
-      "firstName": "Donnie",
-      "lastName": "Mosciski",
-      "signUpDate": "2020-07-01T04:49:26.057Z"
-    },
-    {
-      "age": 66,
-      "firstName": "Herbert",
-      "lastName": "Strosin",
-      "signUpDate": "2019-03-27T04:37:10.953Z"
-    },
-    {
-      "age": 22,
-      "firstName": "Gabrielle",
-      "lastName": "Robel",
-      "signUpDate": "2019-12-16T14:12:21.778Z"
-    },
-    {
-      "age": 4,
-      "firstName": "Roselyn",
-      "lastName": "Rohan",
-      "signUpDate": "2019-09-05T19:43:39.114Z"
-    },
-    {
-      "age": 20,
-      "firstName": "Solon",
-      "lastName": "Nienow",
-      "signUpDate": "2020-10-16T02:28:43.106Z"
-    },
-    {
-      "age": 42,
-      "firstName": "Lambert",
-      "lastName": "Dickens",
-      "signUpDate": "2019-05-30T10:28:57.098Z"
-    },
-    {
-      "age": 4,
-      "firstName": "Nickolas",
-      "lastName": "Erdman",
-      "signUpDate": "2020-06-06T01:29:38.998Z"
-    },
-    {
-      "age": 8,
-      "firstName": "Emelia",
-      "lastName": "Bergstrom",
-      "signUpDate": "2020-07-19T05:45:55.342Z"
-    },
-    {
-      "age": 8,
-      "firstName": "Kevon",
-      "lastName": "Stark",
-      "signUpDate": "2019-04-30T07:31:57.161Z"
-    },
-    {
-      "age": 89,
-      "firstName": "Corine",
-      "lastName": "Yost",
-      "signUpDate": "2019-10-18T13:27:06.175Z"
-    },
-    {
-      "age": 68,
-      "firstName": "Estel",
-      "lastName": "Welch",
-      "signUpDate": "2020-12-19T08:32:21.789Z"
-    },
-    {
-      "age": 87,
-      "firstName": "Curtis",
-      "lastName": "O'Keefe",
-      "signUpDate": "2019-12-03T00:57:58.831Z"
-    },
-    {
-      "age": 9,
-      "firstName": "Myra",
-      "lastName": "Labadie",
-      "signUpDate": "2019-11-27T14:43:41.936Z"
-    },
-    {
-      "age": 16,
-      "firstName": "Orin",
-      "lastName": "Zemlak",
-      "signUpDate": "2019-11-14T18:17:14.250Z"
-    },
-    {
-      "age": 4,
-      "firstName": "Serenity",
-      "lastName": "Labadie",
-      "signUpDate": "2020-08-25T06:54:25.876Z"
-    },
-    {
-      "age": 100,
-      "firstName": "Coty",
-      "lastName": "Hamill",
-      "signUpDate": "2020-10-04T14:50:38.937Z"
-    },
-    {
-      "age": 83,
-      "firstName": "Foster",
-      "lastName": "Bauch",
-      "signUpDate": "2020-02-01T14:58:39.799Z"
-    },
-    {
-      "age": 87,
-      "firstName": "Mozelle",
-      "lastName": "Lowe",
-      "signUpDate": "2019-12-31T15:45:14.245Z"
-    },
-    {
-      "age": 24,
-      "firstName": "Tia",
-      "lastName": "McDermott",
-      "signUpDate": "2020-12-30T14:40:16.915Z"
-    },
-    {
-      "age": 15,
-      "firstName": "Lynn",
-      "lastName": "Strosin",
-      "signUpDate": "2019-04-03T05:44:40.460Z"
-    },
-    {
-      "age": 81,
-      "firstName": "Garrett",
-      "lastName": "Moore",
-      "signUpDate": "2019-07-26T09:11:10.666Z"
-    },
-    {
-      "age": 53,
-      "firstName": "Effie",
-      "lastName": "Ruecker",
-      "signUpDate": "2019-04-02T17:38:02.820Z"
-    },
-    {
-      "age": 99,
-      "firstName": "Vernice",
-      "lastName": "Dickinson",
-      "signUpDate": "2021-01-08T06:51:48.544Z"
-    },
-    {
-      "age": 25,
-      "firstName": "Bertram",
-      "lastName": "Kuphal",
-      "signUpDate": "2019-02-04T23:37:08.588Z"
-    },
-    {
-      "age": 57,
-      "firstName": "Oceane",
-      "lastName": "Schowalter",
-      "signUpDate": "2020-12-11T03:04:06.672Z"
-    },
-    {
-      "age": 24,
-      "firstName": "Cedrick",
-      "lastName": "Hagenes",
-      "signUpDate": "2019-03-28T15:24:55.254Z"
-    },
-    {
-      "age": 39,
-      "firstName": "Kayley",
-      "lastName": "O'Reilly",
-      "signUpDate": "2019-05-09T19:43:13.704Z"
-    },
-    {
-      "age": 38,
-      "firstName": "Keshawn",
-      "lastName": "Roberts",
-      "signUpDate": "2019-01-26T13:27:33.379Z"
-    },
-    {
-      "age": 27,
-      "firstName": "Frieda",
-      "lastName": "Satterfield",
-      "signUpDate": "2020-04-13T12:48:58.216Z"
-    },
-    {
-      "age": 83,
-      "firstName": "Wilbert",
-      "lastName": "Kunze",
-      "signUpDate": "2020-10-02T00:08:42.715Z"
-    },
-    {
-      "age": 77,
-      "firstName": "Idell",
-      "lastName": "Lemke",
-      "signUpDate": "2020-11-23T09:26:13.764Z"
-    }
-  ]
-}
-
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ firstName + + lastName + + age + + signUpDate + + 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`] = ` -
-  {
-  "data": [
-    {
-      "age": 90,
-      "name": {
-        "first": "Destiney",
-        "last": "Schaden"
-      },
-      "signUpDate": "2020-11-16T06:01:56.359Z"
-    },
-    {
-      "age": 19,
-      "name": {
-        "first": "Garrick",
-        "last": "Bashirian"
-      },
-      "signUpDate": "2020-11-27T19:39:51.841Z"
-    },
-    {
-      "age": 67,
-      "name": {
-        "first": "Osbaldo",
-        "last": "Bartoletti"
-      },
-      "signUpDate": "2020-02-14T19:35:04.750Z"
-    },
-    {
-      "age": 14,
-      "name": {
-        "first": "Izabella",
-        "last": "Beier"
-      },
-      "signUpDate": "2019-05-29T10:58:26.801Z"
-    },
-    {
-      "age": 58,
-      "name": {
-        "first": "Abe",
-        "last": "Ferry"
-      },
-      "signUpDate": "2019-12-27T18:44:50.032Z"
-    },
-    {
-      "age": 10,
-      "name": {
-        "first": "Carlos",
-        "last": "Schultz"
-      },
-      "signUpDate": "2019-03-28T07:47:31.604Z"
-    },
-    {
-      "age": 34,
-      "name": {
-        "first": "Santiago",
-        "last": "Pollich"
-      },
-      "signUpDate": "2019-06-11T05:42:03.447Z"
-    },
-    {
-      "age": 94,
-      "name": {
-        "first": "Kiana",
-        "last": "Hoppe"
-      },
-      "signUpDate": "2019-02-04T13:39:16.378Z"
-    },
-    {
-      "age": 35,
-      "name": {
-        "first": "Anita",
-        "last": "Russel"
-      },
-      "signUpDate": "2019-02-06T02:08:11.807Z"
-    },
-    {
-      "age": 10,
-      "name": {
-        "first": "Isabell",
-        "last": "Wilkinson"
-      },
-      "signUpDate": "2019-05-25T20:03:23.610Z"
-    },
-    {
-      "age": 99,
-      "name": {
-        "first": "Elva",
-        "last": "Kunze"
-      },
-      "signUpDate": "2019-05-08T05:15:53.193Z"
-    },
-    {
-      "age": 54,
-      "name": {
-        "first": "Benjamin",
-        "last": "Kunze"
-      },
-      "signUpDate": "2020-10-12T18:58:37.702Z"
-    },
-    {
-      "age": 35,
-      "name": {
-        "first": "Tianna",
-        "last": "Rippin"
-      },
-      "signUpDate": "2019-05-02T14:35:59.935Z"
-    },
-    {
-      "age": 89,
-      "name": {
-        "first": "Audie",
-        "last": "Pollich"
-      },
-      "signUpDate": "2019-10-10T00:47:20.986Z"
-    },
-    {
-      "age": 13,
-      "name": {
-        "first": "Garnett",
-        "last": "Daugherty"
-      },
-      "signUpDate": "2020-05-13T10:09:28.956Z"
-    },
-    {
-      "age": 32,
-      "name": {
-        "first": "Janie",
-        "last": "Miller"
-      },
-      "signUpDate": "2020-04-16T20:15:45.128Z"
-    },
-    {
-      "age": 69,
-      "name": {
-        "first": "Macy",
-        "last": "Haley"
-      },
-      "signUpDate": "2019-03-12T17:56:35.849Z"
-    },
-    {
-      "age": 60,
-      "name": {
-        "first": "Alice",
-        "last": "McClure"
-      },
-      "signUpDate": "2019-07-07T07:09:53.803Z"
-    },
-    {
-      "age": 65,
-      "name": {
-        "first": "Ara",
-        "last": "Fritsch"
-      },
-      "signUpDate": "2019-05-20T00:08:06.085Z"
-    },
-    {
-      "age": 68,
-      "name": {
-        "first": "Leonora",
-        "last": "Bayer"
-      },
-      "signUpDate": "2019-03-26T10:22:53.934Z"
-    },
-    {
-      "age": 35,
-      "name": {
-        "first": "Corrine",
-        "last": "Beier"
-      },
-      "signUpDate": "2020-11-17T11:35:28.797Z"
-    },
-    {
-      "age": 26,
-      "name": {
-        "first": "Tyshawn",
-        "last": "Schneider"
-      },
-      "signUpDate": "2020-11-18T22:44:05.602Z"
-    },
-    {
-      "age": 77,
-      "name": {
-        "first": "Daron",
-        "last": "Greenholt"
-      },
-      "signUpDate": "2020-09-24T08:40:48.045Z"
-    },
-    {
-      "age": 31,
-      "name": {
-        "first": "Jaycee",
-        "last": "Zemlak"
-      },
-      "signUpDate": "2019-06-25T18:23:27.901Z"
-    },
-    {
-      "age": 88,
-      "name": {
-        "first": "Aryanna",
-        "last": "Zieme"
-      },
-      "signUpDate": "2020-03-26T07:05:01.026Z"
-    },
-    {
-      "age": 20,
-      "name": {
-        "first": "Lori",
-        "last": "Donnelly"
-      },
-      "signUpDate": "2019-04-25T20:08:53.608Z"
-    },
-    {
-      "age": 63,
-      "name": {
-        "first": "Kaley",
-        "last": "Wehner"
-      },
-      "signUpDate": "2020-08-01T08:22:39.739Z"
-    },
-    {
-      "age": 75,
-      "name": {
-        "first": "Jadyn",
-        "last": "Goodwin"
-      },
-      "signUpDate": "2020-06-24T16:56:30.607Z"
-    },
-    {
-      "age": 100,
-      "name": {
-        "first": "Lavinia",
-        "last": "Hayes"
-      },
-      "signUpDate": "2020-07-08T18:11:42.919Z"
-    },
-    {
-      "age": 13,
-      "name": {
-        "first": "Elfrieda",
-        "last": "Heller"
-      },
-      "signUpDate": "2020-11-12T08:41:45.341Z"
-    },
-    {
-      "age": 90,
-      "name": {
-        "first": "Harry",
-        "last": "Nienow"
-      },
-      "signUpDate": "2020-06-14T14:52:48.582Z"
-    },
-    {
-      "age": 65,
-      "name": {
-        "first": "Heaven",
-        "last": "Roberts"
-      },
-      "signUpDate": "2019-01-14T03:41:47.716Z"
-    },
-    {
-      "age": 11,
-      "name": {
-        "first": "Monserrat",
-        "last": "Quigley"
-      },
-      "signUpDate": "2020-06-27T14:56:15.878Z"
-    },
-    {
-      "age": 95,
-      "name": {
-        "first": "Ardella",
-        "last": "Green"
-      },
-      "signUpDate": "2020-11-18T03:07:37.125Z"
-    },
-    {
-      "age": 54,
-      "name": {
-        "first": "Brenna",
-        "last": "Zboncak"
-      },
-      "signUpDate": "2019-05-14T03:12:23.351Z"
-    },
-    {
-      "age": 5,
-      "name": {
-        "first": "Mike",
-        "last": "O'Keefe"
-      },
-      "signUpDate": "2019-08-11T20:54:29.510Z"
-    },
-    {
-      "age": 83,
-      "name": {
-        "first": "Alvena",
-        "last": "Mohr"
-      },
-      "signUpDate": "2020-03-21T09:26:22.702Z"
-    },
-    {
-      "age": 82,
-      "name": {
-        "first": "Dariana",
-        "last": "Heaney"
-      },
-      "signUpDate": "2019-05-22T22:51:41.863Z"
-    },
-    {
-      "age": 50,
-      "name": {
-        "first": "Kailey",
-        "last": "White"
-      },
-      "signUpDate": "2020-05-30T19:04:58.819Z"
-    },
-    {
-      "age": 81,
-      "name": {
-        "first": "Savanah",
-        "last": "Dibbert"
-      },
-      "signUpDate": "2020-10-01T02:08:27.583Z"
-    },
-    {
-      "age": 58,
-      "name": {
-        "first": "Estevan",
-        "last": "Pfannerstill"
-      },
-      "signUpDate": "2019-09-01T01:52:28.661Z"
-    },
-    {
-      "age": 68,
-      "name": {
-        "first": "Celestino",
-        "last": "Spinka"
-      },
-      "signUpDate": "2019-04-08T02:34:10.976Z"
-    },
-    {
-      "age": 34,
-      "name": {
-        "first": "Arjun",
-        "last": "Treutel"
-      },
-      "signUpDate": "2019-08-05T18:49:24.213Z"
-    },
-    {
-      "age": 79,
-      "name": {
-        "first": "Travon",
-        "last": "Yundt"
-      },
-      "signUpDate": "2019-11-01T14:31:14.834Z"
-    },
-    {
-      "age": 4,
-      "name": {
-        "first": "Matt",
-        "last": "Wunsch"
-      },
-      "signUpDate": "2020-03-31T04:12:04.011Z"
-    },
-    {
-      "age": 1,
-      "name": {
-        "first": "Haylie",
-        "last": "Johnson"
-      },
-      "signUpDate": "2020-01-18T01:44:02.063Z"
-    },
-    {
-      "age": 37,
-      "name": {
-        "first": "Prince",
-        "last": "Reinger"
-      },
-      "signUpDate": "2021-01-05T14:54:22.171Z"
-    },
-    {
-      "age": 90,
-      "name": {
-        "first": "Rollin",
-        "last": "Olson"
-      },
-      "signUpDate": "2019-12-15T03:32:21.192Z"
-    },
-    {
-      "age": 18,
-      "name": {
-        "first": "Nicole",
-        "last": "Grant"
-      },
-      "signUpDate": "2019-03-22T11:29:37.737Z"
-    },
-    {
-      "age": 34,
-      "name": {
-        "first": "Eileen",
-        "last": "Hauck"
-      },
-      "signUpDate": "2020-07-31T21:33:20.697Z"
-    }
-  ]
-}
-
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ name + + age + + signUpDate + + foo +
+ 
+          
+            {
+  "first": "Destiney",
+  "last": "Schaden"
+}
+          
+
+ 		+ 90 + + + + + - + +
+ 
+          
+            {
+  "first": "Garrick",
+  "last": "Bashirian"
+}
+          
+
+ 		+ 19 + + + + + - + +
+ 
+          
+            {
+  "first": "Osbaldo",
+  "last": "Bartoletti"
+}
+          
+
+ 		+ 67 + + + + + - + +
+ 
+          
+            {
+  "first": "Izabella",
+  "last": "Beier"
+}
+          
+
+ 		+ 14 + + + + + - + +
+ 
+          
+            {
+  "first": "Abe",
+  "last": "Ferry"
+}
+          
+
+ 		+ 58 + + + + + - + +
+ 
+          
+            {
+  "first": "Carlos",
+  "last": "Schultz"
+}
+          
+
+ 		+ 10 + + + + + - + +
+ 
+          
+            {
+  "first": "Santiago",
+  "last": "Pollich"
+}
+          
+
+ 		+ 34 + + + + + - + +
+ 
+          
+            {
+  "first": "Kiana",
+  "last": "Hoppe"
+}
+          
+
+ 		+ 94 + + + + + - + +
+ 
+          
+            {
+  "first": "Anita",
+  "last": "Russel"
+}
+          
+
+ 		+ 35 + + + + + - + +
+ 
+          
+            {
+  "first": "Isabell",
+  "last": "Wilkinson"
+}
+          
+
+ 		+ 10 + + + + + - + +
+ 
+          
+            {
+  "first": "Elva",
+  "last": "Kunze"
+}
+          
+
+ 		+ 99 + + + + + - + +
+ 
+          
+            {
+  "first": "Benjamin",
+  "last": "Kunze"
+}
+          
+
+ 		+ 54 + + + + + - + +
+ 
+          
+            {
+  "first": "Tianna",
+  "last": "Rippin"
+}
+          
+
+ 		+ 35 + + + + + - + +
+ 
+          
+            {
+  "first": "Audie",
+  "last": "Pollich"
+}
+          
+
+ 		+ 89 + + + + + - + +
+ 
+          
+            {
+  "first": "Garnett",
+  "last": "Daugherty"
+}
+          
+
+ 		+ 13 + + + + + - + +
+ 
+          
+            {
+  "first": "Janie",
+  "last": "Miller"
+}
+          
+
+ 		+ 32 + + + + + - + +
+ 
+          
+            {
+  "first": "Macy",
+  "last": "Haley"
+}
+          
+
+ 		+ 69 + + + + + - + +
+ 
+          
+            {
+  "first": "Alice",
+  "last": "McClure"
+}
+          
+
+ 		+ 60 + + + + + - + +
+ 
+          
+            {
+  "first": "Ara",
+  "last": "Fritsch"
+}
+          
+
+ 		+ 65 + + + + + - + +
+ 
+          
+            {
+  "first": "Leonora",
+  "last": "Bayer"
+}
+          
+
+ 		+ 68 + + + + + - + +
+ 
+          
+            {
+  "first": "Corrine",
+  "last": "Beier"
+}
+          
+
+ 		+ 35 + + + + + - + +
+ 
+          
+            {
+  "first": "Tyshawn",
+  "last": "Schneider"
+}
+          
+
+ 		+ 26 + + + + + - + +
+ 
+          
+            {
+  "first": "Daron",
+  "last": "Greenholt"
+}
+          
+
+ 		+ 77 + + + + + - + +
+ 
+          
+            {
+  "first": "Jaycee",
+  "last": "Zemlak"
+}
+          
+
+ 		+ 31 + + + + + - + +
+ 
+          
+            {
+  "first": "Aryanna",
+  "last": "Zieme"
+}
+          
+
+ 		+ 88 + + + + + - + +
+ 
+          
+            {
+  "first": "Lori",
+  "last": "Donnelly"
+}
+          
+
+ 		+ 20 + + + + + - + +
+ 
+          
+            {
+  "first": "Kaley",
+  "last": "Wehner"
+}
+          
+
+ 		+ 63 + + + + + - + +
+ 
+          
+            {
+  "first": "Jadyn",
+  "last": "Goodwin"
+}
+          
+
+ 		+ 75 + + + + + - + +
+ 
+          
+            {
+  "first": "Lavinia",
+  "last": "Hayes"
+}
+          
+
+ 		+ 100 + + + + + - + +
+ 
+          
+            {
+  "first": "Elfrieda",
+  "last": "Heller"
+}
+          
+
+ 		+ 13 + + + + + - + +
+ 
+          
+            {
+  "first": "Harry",
+  "last": "Nienow"
+}
+          
+
+ 		+ 90 + + + + + - + +
+ 
+          
+            {
+  "first": "Heaven",
+  "last": "Roberts"
+}
+          
+
+ 		+ 65 + + + + + - + +
+ 
+          
+            {
+  "first": "Monserrat",
+  "last": "Quigley"
+}
+          
+
+ 		+ 11 + + + + + - + +
+ 
+          
+            {
+  "first": "Ardella",
+  "last": "Green"
+}
+          
+
+ 		+ 95 + + + + + - + +
+ 
+          
+            {
+  "first": "Brenna",
+  "last": "Zboncak"
+}
+          
+
+ 		+ 54 + + + + + - + +
+ 
+          
+            {
+  "first": "Mike",
+  "last": "O'Keefe"
+}
+          
+
+ 		+ 5 + + + + + - + +
+ 
+          
+            {
+  "first": "Alvena",
+  "last": "Mohr"
+}
+          
+
+ 		+ 83 + + + + + - + +
+ 
+          
+            {
+  "first": "Dariana",
+  "last": "Heaney"
+}
+          
+
+ 		+ 82 + + + + + - + +
+ 
+          
+            {
+  "first": "Kailey",
+  "last": "White"
+}
+          
+
+ 		+ 50 + + + + + - + +
+ 
+          
+            {
+  "first": "Savanah",
+  "last": "Dibbert"
+}
+          
+
+ 		+ 81 + + + + + - + +
+ 
+          
+            {
+  "first": "Estevan",
+  "last": "Pfannerstill"
+}
+          
+
+ 		+ 58 + + + + + - + +
+ 
+          
+            {
+  "first": "Celestino",
+  "last": "Spinka"
+}
+          
+
+ 		+ 68 + + + + + - + +
+ 
+          
+            {
+  "first": "Arjun",
+  "last": "Treutel"
+}
+          
+
+ 		+ 34 + + + + + - + +
+ 
+          
+            {
+  "first": "Travon",
+  "last": "Yundt"
+}
+          
+
+ 		+ 79 + + + + + - + +
+ 
+          
+            {
+  "first": "Matt",
+  "last": "Wunsch"
+}
+          
+
+ 		+ 4 + + + + + - + +
+ 
+          
+            {
+  "first": "Haylie",
+  "last": "Johnson"
+}
+          
+
+ 		+ 1 + + + + + - + +
+ 
+          
+            {
+  "first": "Prince",
+  "last": "Reinger"
+}
+          
+
+ 		+ 37 + + + + + - + +
+ 
+          
+            {
+  "first": "Rollin",
+  "last": "Olson"
+}
+          
+
+ 		+ 90 + + + + + - + +
+ 
+          
+            {
+  "first": "Nicole",
+  "last": "Grant"
+}
+          
+
+ 		+ 18 + + + + + - + +
+ 
+          
+            {
+  "first": "Eileen",
+  "last": "Hauck"
+}
+          
+
+ 		+ 34 + + + + + - + +
`; diff --git a/src/data-table/column-configuration.tsx b/src/data-table/column-configuration.tsx new file mode 100644 index 00000000..6d62c5e0 --- /dev/null +++ b/src/data-table/column-configuration.tsx @@ -0,0 +1,86 @@ +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 +) => null; + +/** + * 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 = ({children}) => { + const configuration = new Map(); + const configure = ( + name: string, + { + label = name, + renderer = AnyRenderer, + ...config + }: ColumnConfigurationWithDefaults + ) => { + // const had = configuration.get(name); + configuration.set(name, { + label, + renderer, + ...config, + }); + return null; + }; + + return ( + + {children} + + ); +}; diff --git a/src/data-table/column-renderer.tsx b/src/data-table/column-renderer.tsx new file mode 100644 index 00000000..e1b614c2 --- /dev/null +++ b/src/data-table/column-renderer.tsx @@ -0,0 +1,13 @@ +import {useConfigureColumn} from './column-configuration'; +import {FieldRendererProps, IdType} from './types'; + +export const ColumnRenderer = >({ + name, + label, +}: FieldRendererProps) => { + const configure = useConfigureColumn(); + + 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.tsx b/src/data-table/data-table.tsx index 2fabaacd..d96fbcf5 100644 --- a/src/data-table/data-table.tsx +++ b/src/data-table/data-table.tsx @@ -1,14 +1,63 @@ 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 {RenderProps} from './types'; +export type DataTableInnerProps = { + data: T[]; +}; + +export const DataTableInner = ({ + data, +}: DataTableInnerProps) => { + const configuredColumns = useConfiguredColumnNames(); + return ( + + + + {configuredColumns.map((name) => ( + + ))} + + + {data.map((rowData, index) => ( + + {configuredColumns.map((name) => ( + + ))} + + ))} + +
+ + ); +}; + export type DataTableProps = { data: T[]; render: React.ComponentType>; }; -export const DataTable = (props: DataTableProps) => ( - <> - 
{JSON.stringify(props, null, 2)}
- -); +export const DataTable = ({ + data, + render: Render, +}: DataTableProps) => { + return ( + + + + + ); +}; diff --git a/src/data-table/types.ts b/src/data-table/types.ts index c048312c..e1fd42fb 100644 --- a/src/data-table/types.ts +++ b/src/data-table/types.ts @@ -1,12 +1,15 @@ +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: ( + FieldRenderer: >( props: FieldRendererProps ) => JSX.Element | null; } -export type FieldRendererProps = { +export type FieldRendererProps> = { name: K; label?: React.ReactNode; render?: T[K] extends object ? React.ComponentType> : never; @@ -14,5 +17,5 @@ export type FieldRendererProps = { export type FieldRenderer< T extends object, - K extends keyof T + K extends IdType > = React.ComponentType>; From 7ae0d9fa34bcf357de5b7b8d1e610a83a9a1ea93 Mon Sep 17 00:00:00 2001 From: ianwremmel <1182361+ianwremmel@users.noreply.github.com> Date: Sun, 4 Oct 2020 12:51:10 -0700 Subject: [PATCH 3/6] feat(data-table): configure tables with nested data --- .../data-table.stories.storyshot | 860 ++++++++++-------- src/data-table/column-configuration.tsx | 54 +- src/data-table/column-renderer.tsx | 17 +- src/data-table/data-table.stories.tsx | 16 +- src/data-table/data-table.tsx | 3 +- src/data-table/support.spec.ts | 27 + src/data-table/support.ts | 29 + 7 files changed, 578 insertions(+), 428 deletions(-) create mode 100644 src/data-table/support.spec.ts create mode 100644 src/data-table/support.ts diff --git a/src/data-table/__snapshots__/data-table.stories.storyshot b/src/data-table/__snapshots__/data-table.stories.storyshot index b2073a19..7a36a88a 100644 --- a/src/data-table/__snapshots__/data-table.stories.storyshot +++ b/src/data-table/__snapshots__/data-table.stories.storyshot @@ -1232,7 +1232,13 @@ exports[`Storyshots Primitives/DataTable Nested Data Table 1`] = ` > - name + name.first + + + name.last + + + This column is supposed to empty. It's here to prove typescript detects invalid column access. age @@ -1241,20 +1247,21 @@ exports[`Storyshots Primitives/DataTable Nested Data Table 1`] = ` signUpDate - foo + This column is supposed to empty. It's here to prove typescript detects invalid column access. - 
-          
-            {
-  "first": "Destiney",
-  "last": "Schaden"
-}
-          
-
+ Destiney + + + Schaden + + + + - + 90 @@ -1275,14 +1282,15 @@ exports[`Storyshots Primitives/DataTable Nested Data Table 1`] = ` - 
-          
-            {
-  "first": "Garrick",
-  "last": "Bashirian"
-}
-          
-
+ Garrick + + + Bashirian + + + + - + 19 @@ -1303,14 +1311,15 @@ exports[`Storyshots Primitives/DataTable Nested Data Table 1`] = ` - 
-          
-            {
-  "first": "Osbaldo",
-  "last": "Bartoletti"
-}
-          
-
+ Osbaldo + + + Bartoletti + + + + - + 67 @@ -1331,14 +1340,15 @@ exports[`Storyshots Primitives/DataTable Nested Data Table 1`] = ` - 
-          
-            {
-  "first": "Izabella",
-  "last": "Beier"
-}
-          
-
+ Izabella + + + Beier + + + + - + 14 @@ -1359,14 +1369,15 @@ exports[`Storyshots Primitives/DataTable Nested Data Table 1`] = ` - 
-          
-            {
-  "first": "Abe",
-  "last": "Ferry"
-}
-          
-
+ Abe + + + Ferry + + + + - + 58 @@ -1387,14 +1398,15 @@ exports[`Storyshots Primitives/DataTable Nested Data Table 1`] = ` - 
-          
-            {
-  "first": "Carlos",
-  "last": "Schultz"
-}
-          
-
+ Carlos + + + Schultz + + + + - + 10 @@ -1415,14 +1427,15 @@ exports[`Storyshots Primitives/DataTable Nested Data Table 1`] = ` - 
-          
-            {
-  "first": "Santiago",
-  "last": "Pollich"
-}
-          
-
+ Santiago + + + Pollich + + + + - + 34 @@ -1443,14 +1456,15 @@ exports[`Storyshots Primitives/DataTable Nested Data Table 1`] = ` - 
-          
-            {
-  "first": "Kiana",
-  "last": "Hoppe"
-}
-          
-
+ Kiana + + + Hoppe + + + + - + 94 @@ -1471,14 +1485,15 @@ exports[`Storyshots Primitives/DataTable Nested Data Table 1`] = ` - 
-          
-            {
-  "first": "Anita",
-  "last": "Russel"
-}
-          
-
+ Anita + + + Russel + + + + - + 35 @@ -1499,14 +1514,15 @@ exports[`Storyshots Primitives/DataTable Nested Data Table 1`] = ` - 
-          
-            {
-  "first": "Isabell",
-  "last": "Wilkinson"
-}
-          
-
+ Isabell + + + Wilkinson + + + + - + 10 @@ -1527,14 +1543,15 @@ exports[`Storyshots Primitives/DataTable Nested Data Table 1`] = ` - 
-          
-            {
-  "first": "Elva",
-  "last": "Kunze"
-}
-          
-
+ Elva + + + Kunze + + + + - + 99 @@ -1555,14 +1572,15 @@ exports[`Storyshots Primitives/DataTable Nested Data Table 1`] = ` - 
-          
-            {
-  "first": "Benjamin",
-  "last": "Kunze"
-}
-          
-
+ Benjamin + + + Kunze + + + + - + 54 @@ -1583,14 +1601,15 @@ exports[`Storyshots Primitives/DataTable Nested Data Table 1`] = ` - 
-          
-            {
-  "first": "Tianna",
-  "last": "Rippin"
-}
-          
-
+ Tianna + + + Rippin + + + + - + 35 @@ -1611,14 +1630,15 @@ exports[`Storyshots Primitives/DataTable Nested Data Table 1`] = ` - 
-          
-            {
-  "first": "Audie",
-  "last": "Pollich"
-}
-          
-
+ Audie + + + Pollich + + + + - + 89 @@ -1639,14 +1659,15 @@ exports[`Storyshots Primitives/DataTable Nested Data Table 1`] = ` - 
-          
-            {
-  "first": "Garnett",
-  "last": "Daugherty"
-}
-          
-
+ Garnett + + + Daugherty + + + + - + 13 @@ -1667,14 +1688,15 @@ exports[`Storyshots Primitives/DataTable Nested Data Table 1`] = ` - 
-          
-            {
-  "first": "Janie",
-  "last": "Miller"
-}
-          
-
+ Janie + + + Miller + + + + - + 32 @@ -1695,14 +1717,15 @@ exports[`Storyshots Primitives/DataTable Nested Data Table 1`] = ` - 
-          
-            {
-  "first": "Macy",
-  "last": "Haley"
-}
-          
-
+ Macy + + + Haley + + + + - + 69 @@ -1723,14 +1746,15 @@ exports[`Storyshots Primitives/DataTable Nested Data Table 1`] = ` - 
-          
-            {
-  "first": "Alice",
-  "last": "McClure"
-}
-          
-
+ Alice + + + McClure + + + + - + 60 @@ -1751,14 +1775,15 @@ exports[`Storyshots Primitives/DataTable Nested Data Table 1`] = ` - 
-          
-            {
-  "first": "Ara",
-  "last": "Fritsch"
-}
-          
-
+ Ara + + + Fritsch + + + + - + 65 @@ -1779,14 +1804,15 @@ exports[`Storyshots Primitives/DataTable Nested Data Table 1`] = ` - 
-          
-            {
-  "first": "Leonora",
-  "last": "Bayer"
-}
-          
-
+ Leonora + + + Bayer + + + + - + 68 @@ -1807,14 +1833,15 @@ exports[`Storyshots Primitives/DataTable Nested Data Table 1`] = ` - 
-          
-            {
-  "first": "Corrine",
-  "last": "Beier"
-}
-          
-
+ Corrine + + + Beier + + + + - + 35 @@ -1835,14 +1862,15 @@ exports[`Storyshots Primitives/DataTable Nested Data Table 1`] = ` - 
-          
-            {
-  "first": "Tyshawn",
-  "last": "Schneider"
-}
-          
-
+ Tyshawn + + + Schneider + + + + - + 26 @@ -1863,14 +1891,15 @@ exports[`Storyshots Primitives/DataTable Nested Data Table 1`] = ` - 
-          
-            {
-  "first": "Daron",
-  "last": "Greenholt"
-}
-          
-
+ Daron + + + Greenholt + + + + - + 77 @@ -1891,14 +1920,15 @@ exports[`Storyshots Primitives/DataTable Nested Data Table 1`] = ` - 
-          
-            {
-  "first": "Jaycee",
-  "last": "Zemlak"
-}
-          
-
+ Jaycee + + + Zemlak + + + + - + 31 @@ -1919,14 +1949,15 @@ exports[`Storyshots Primitives/DataTable Nested Data Table 1`] = ` - 
-          
-            {
-  "first": "Aryanna",
-  "last": "Zieme"
-}
-          
-
+ Aryanna + + + Zieme + + + + - + 88 @@ -1947,14 +1978,15 @@ exports[`Storyshots Primitives/DataTable Nested Data Table 1`] = ` - 
-          
-            {
-  "first": "Lori",
-  "last": "Donnelly"
-}
-          
-
+ Lori + + + Donnelly + + + + - + 20 @@ -1975,14 +2007,15 @@ exports[`Storyshots Primitives/DataTable Nested Data Table 1`] = ` - 
-          
-            {
-  "first": "Kaley",
-  "last": "Wehner"
-}
-          
-
+ Kaley + + + Wehner + + + + - + 63 @@ -2003,14 +2036,15 @@ exports[`Storyshots Primitives/DataTable Nested Data Table 1`] = ` - 
-          
-            {
-  "first": "Jadyn",
-  "last": "Goodwin"
-}
-          
-
+ Jadyn + + + Goodwin + + + + - + 75 @@ -2031,14 +2065,15 @@ exports[`Storyshots Primitives/DataTable Nested Data Table 1`] = ` - 
-          
-            {
-  "first": "Lavinia",
-  "last": "Hayes"
-}
-          
-
+ Lavinia + + + Hayes + + + + - + 100 @@ -2059,14 +2094,15 @@ exports[`Storyshots Primitives/DataTable Nested Data Table 1`] = ` - 
-          
-            {
-  "first": "Elfrieda",
-  "last": "Heller"
-}
-          
-
+ Elfrieda + + + Heller + + + + - + 13 @@ -2087,14 +2123,15 @@ exports[`Storyshots Primitives/DataTable Nested Data Table 1`] = ` - 
-          
-            {
-  "first": "Harry",
-  "last": "Nienow"
-}
-          
-
+ Harry + + + Nienow + + + + - + 90 @@ -2115,14 +2152,15 @@ exports[`Storyshots Primitives/DataTable Nested Data Table 1`] = ` - 
-          
-            {
-  "first": "Heaven",
-  "last": "Roberts"
-}
-          
-
+ Heaven + + + Roberts + + + + - + 65 @@ -2143,14 +2181,15 @@ exports[`Storyshots Primitives/DataTable Nested Data Table 1`] = ` - 
-          
-            {
-  "first": "Monserrat",
-  "last": "Quigley"
-}
-          
-
+ Monserrat + + + Quigley + + + + - + 11 @@ -2171,14 +2210,15 @@ exports[`Storyshots Primitives/DataTable Nested Data Table 1`] = ` - 
-          
-            {
-  "first": "Ardella",
-  "last": "Green"
-}
-          
-
+ Ardella + + + Green + + + + - + 95 @@ -2199,14 +2239,15 @@ exports[`Storyshots Primitives/DataTable Nested Data Table 1`] = ` - 
-          
-            {
-  "first": "Brenna",
-  "last": "Zboncak"
-}
-          
-
+ Brenna + + + Zboncak + + + + - + 54 @@ -2227,14 +2268,15 @@ exports[`Storyshots Primitives/DataTable Nested Data Table 1`] = ` - 
-          
-            {
-  "first": "Mike",
-  "last": "O'Keefe"
-}
-          
-
+ Mike + + + O'Keefe + + + + - + 5 @@ -2255,14 +2297,15 @@ exports[`Storyshots Primitives/DataTable Nested Data Table 1`] = ` - 
-          
-            {
-  "first": "Alvena",
-  "last": "Mohr"
-}
-          
-
+ Alvena + + + Mohr + + + + - + 83 @@ -2283,14 +2326,15 @@ exports[`Storyshots Primitives/DataTable Nested Data Table 1`] = ` - 
-          
-            {
-  "first": "Dariana",
-  "last": "Heaney"
-}
-          
-
+ Dariana + + + Heaney + + + + - + 82 @@ -2311,14 +2355,15 @@ exports[`Storyshots Primitives/DataTable Nested Data Table 1`] = ` - 
-          
-            {
-  "first": "Kailey",
-  "last": "White"
-}
-          
-
+ Kailey + + + White + + + + - + 50 @@ -2339,14 +2384,15 @@ exports[`Storyshots Primitives/DataTable Nested Data Table 1`] = ` - 
-          
-            {
-  "first": "Savanah",
-  "last": "Dibbert"
-}
-          
-
+ Savanah + + + Dibbert + + + + - + 81 @@ -2367,14 +2413,15 @@ exports[`Storyshots Primitives/DataTable Nested Data Table 1`] = ` - 
-          
-            {
-  "first": "Estevan",
-  "last": "Pfannerstill"
-}
-          
-
+ Estevan + + + Pfannerstill + + + + - + 58 @@ -2395,14 +2442,15 @@ exports[`Storyshots Primitives/DataTable Nested Data Table 1`] = ` - 
-          
-            {
-  "first": "Celestino",
-  "last": "Spinka"
-}
-          
-
+ Celestino + + + Spinka + + + + - + 68 @@ -2423,14 +2471,15 @@ exports[`Storyshots Primitives/DataTable Nested Data Table 1`] = ` - 
-          
-            {
-  "first": "Arjun",
-  "last": "Treutel"
-}
-          
-
+ Arjun + + + Treutel + + + + - + 34 @@ -2451,14 +2500,15 @@ exports[`Storyshots Primitives/DataTable Nested Data Table 1`] = ` - 
-          
-            {
-  "first": "Travon",
-  "last": "Yundt"
-}
-          
-
+ Travon + + + Yundt + + + + - + 79 @@ -2479,14 +2529,15 @@ exports[`Storyshots Primitives/DataTable Nested Data Table 1`] = ` - 
-          
-            {
-  "first": "Matt",
-  "last": "Wunsch"
-}
-          
-
+ Matt + + + Wunsch + + + + - + 4 @@ -2507,14 +2558,15 @@ exports[`Storyshots Primitives/DataTable Nested Data Table 1`] = ` - 
-          
-            {
-  "first": "Haylie",
-  "last": "Johnson"
-}
-          
-
+ Haylie + + + Johnson + + + + - + 1 @@ -2535,14 +2587,15 @@ exports[`Storyshots Primitives/DataTable Nested Data Table 1`] = ` - 
-          
-            {
-  "first": "Prince",
-  "last": "Reinger"
-}
-          
-
+ Prince + + + Reinger + + + + - + 37 @@ -2563,14 +2616,15 @@ exports[`Storyshots Primitives/DataTable Nested Data Table 1`] = ` - 
-          
-            {
-  "first": "Rollin",
-  "last": "Olson"
-}
-          
-
+ Rollin + + + Olson + + + + - + 90 @@ -2591,14 +2645,15 @@ exports[`Storyshots Primitives/DataTable Nested Data Table 1`] = ` - 
-          
-            {
-  "first": "Nicole",
-  "last": "Grant"
-}
-          
-
+ Nicole + + + Grant + + + + - + 18 @@ -2619,14 +2674,15 @@ exports[`Storyshots Primitives/DataTable Nested Data Table 1`] = ` - 
-          
-            {
-  "first": "Eileen",
-  "last": "Hauck"
-}
-          
-
+ Eileen + + + Hauck + + + + - + 34 diff --git a/src/data-table/column-configuration.tsx b/src/data-table/column-configuration.tsx index 6d62c5e0..ba3ac9be 100644 --- a/src/data-table/column-configuration.tsx +++ b/src/data-table/column-configuration.tsx @@ -40,7 +40,7 @@ export function useColummnConfiguration(name: string): ColumnConfiguration { export type ConfigureFunction = ( name: string, config: ColumnConfigurationWithDefaults -) => null; +) => void; /** * Gets the function for configuring a column @@ -59,24 +59,40 @@ export function useConfiguredColumnNames(): IdType[] { return Array.from(configuration.keys()) as IdType[]; } -export const ColumnConfigurationProvider: React.FC = ({children}) => { - const configuration = new Map(); - const configure = ( - name: string, - { - label = name, - renderer = AnyRenderer, - ...config - }: ColumnConfigurationWithDefaults - ) => { - // const had = configuration.get(name); - configuration.set(name, { - label, - renderer, - ...config, - }); - return null; - }; +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 = name, + renderer = AnyRenderer, + ...config + }: ColumnConfigurationWithDefaults + ) => { + configuration.set(name, { + label, + renderer, + ...config, + }); + }; + } return ( diff --git a/src/data-table/column-renderer.tsx b/src/data-table/column-renderer.tsx index e1b614c2..adf1b897 100644 --- a/src/data-table/column-renderer.tsx +++ b/src/data-table/column-renderer.tsx @@ -1,12 +1,27 @@ -import {useConfigureColumn} from './column-configuration'; +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.stories.tsx b/src/data-table/data-table.stories.tsx index 140f5b0f..3739a256 100644 --- a/src/data-table/data-table.stories.tsx +++ b/src/data-table/data-table.stories.tsx @@ -20,7 +20,7 @@ export const dataTable = () => ( - {/* @ts-expect-error */} + {/* @ts-expect-error - this is here to prove we get an error if we use an invalid column*/} )} @@ -40,15 +40,21 @@ export const nestedDataTable = () => ( - {/* @ts-expect-error */} - + )} /> - {/* @ts-expect-error */} - + )} /> diff --git a/src/data-table/data-table.tsx b/src/data-table/data-table.tsx index d96fbcf5..de471e18 100644 --- a/src/data-table/data-table.tsx +++ b/src/data-table/data-table.tsx @@ -9,6 +9,7 @@ import { 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 = { @@ -34,7 +35,7 @@ export const DataTableInner = ({ ))} 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]; +} From 5c623a6a724e2e0787f368a19bd1db05328bd988 Mon Sep 17 00:00:00 2001 From: ianwremmel <1182361+ianwremmel@users.noreply.github.com> Date: Sun, 11 Oct 2020 20:28:52 -0700 Subject: [PATCH 4/6] feat(tables): autocapitalize generated column names --- package-lock.json | 6 ++++++ package.json | 2 ++ .../__snapshots__/data-table.stories.storyshot | 18 +++++++++--------- src/data-table/column-configuration.tsx | 3 ++- src/data-table/data-table.stories.tsx | 4 ++-- 5 files changed, 21 insertions(+), 12 deletions(-) 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 index 7a36a88a..ceb0ced6 100644 --- a/src/data-table/__snapshots__/data-table.stories.storyshot +++ b/src/data-table/__snapshots__/data-table.stories.storyshot @@ -6,19 +6,19 @@ exports[`Storyshots Primitives/DataTable Data Table 1`] = ` > - firstName + First Name - lastName + Last Name - age + Age - signUpDate + Sign Up Date - foo + Foo @@ -1232,19 +1232,19 @@ exports[`Storyshots Primitives/DataTable Nested Data Table 1`] = ` > - name.first + First Name - name.last + Last Name This column is supposed to empty. It's here to prove typescript detects invalid column access. - age + Age - signUpDate + Sign Up Date This column is supposed to empty. It's here to prove typescript detects invalid column access. diff --git a/src/data-table/column-configuration.tsx b/src/data-table/column-configuration.tsx index ba3ac9be..96e3cb2c 100644 --- a/src/data-table/column-configuration.tsx +++ b/src/data-table/column-configuration.tsx @@ -1,3 +1,4 @@ +import {startCase} from 'lodash'; import React, {useContext} from 'react'; import {AnyRenderer} from '../renderers'; @@ -81,7 +82,7 @@ export const ColumnConfigurationProvider: React.FC<{name?: string}> = ({ configure = ( name: string, { - label = name, + label = startCase(name), renderer = AnyRenderer, ...config }: ColumnConfigurationWithDefaults diff --git a/src/data-table/data-table.stories.tsx b/src/data-table/data-table.stories.tsx index 3739a256..49969825 100644 --- a/src/data-table/data-table.stories.tsx +++ b/src/data-table/data-table.stories.tsx @@ -38,8 +38,8 @@ export const nestedDataTable = () => ( name="name" render={({FieldRenderer: NameFieldRenderer}) => ( - - + + Date: Sun, 11 Oct 2020 21:04:18 -0700 Subject: [PATCH 5/6] feat(tables): add idColumn to avoid using the row index as react key --- src/data-table/data-table.tsx | 43 +++++++++++++++++++++++++---------- 1 file changed, 31 insertions(+), 12 deletions(-) diff --git a/src/data-table/data-table.tsx b/src/data-table/data-table.tsx index de471e18..e9ea33dc 100644 --- a/src/data-table/data-table.tsx +++ b/src/data-table/data-table.tsx @@ -14,10 +14,12 @@ import {RenderProps} from './types'; export type DataTableInnerProps = { data: T[]; + idColumn: keyof T; }; export const DataTableInner = ({ data, + idColumn, }: DataTableInnerProps) => { const configuredColumns = useConfiguredColumnNames(); return ( @@ -29,17 +31,29 @@ export const DataTableInner = ({ ))} - {data.map((rowData, index) => ( - - {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) => ( + + ))} + + ); + })} @@ -48,17 +62,22 @@ export const DataTableInner = ({ 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 ( - + ); }; From 99f7c2e51ace433a6bcdfd3a697825da4c86e543 Mon Sep 17 00:00:00 2001 From: ianwremmel <1182361+ianwremmel@users.noreply.github.com> Date: Sun, 14 Mar 2021 20:29:26 -0700 Subject: [PATCH 6/6] #no-push --- .../data-table.stories.storyshot | 973 ++++++++++++++++++ src/data-table/data-table.stories.tsx | 24 + 2 files changed, 997 insertions(+) diff --git a/src/data-table/__snapshots__/data-table.stories.storyshot b/src/data-table/__snapshots__/data-table.stories.storyshot index ceb0ced6..11272e4e 100644 --- a/src/data-table/__snapshots__/data-table.stories.storyshot +++ b/src/data-table/__snapshots__/data-table.stories.storyshot @@ -1227,6 +1227,979 @@ exports[`Storyshots Primitives/DataTable Data Table 1`] = ` `; 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`] = ` diff --git a/src/data-table/data-table.stories.tsx b/src/data-table/data-table.stories.tsx index 49969825..b73ef76b 100644 --- a/src/data-table/data-table.stories.tsx +++ b/src/data-table/data-table.stories.tsx @@ -30,6 +30,30 @@ export const dataTable = () => ( const complexData = makeComplexPeople(); export const nestedDataTable = () => ( + ( + + ( + + + + + )} + /> + + + + )} + /> +); + +/** + * Just here for testing TypeScript. Does not demonstrate anything interesting in storybook. + */ +export const nestedDataTableForTesting = () => ( (