diff --git a/package.json b/package.json index 7b347524e4..fa63307f98 100644 --- a/package.json +++ b/package.json @@ -93,7 +93,8 @@ "react-datepicker": "^2.9.6", "react-google-map": "^3.1.1", "react-google-maps-loader": "^4.2.5", - "react-icons": "^3.7.0" + "react-icons": "^3.7.0", + "react-table": "7.0.0-alpha.35" }, "peerDependencies": { "react": "^16.8.6", diff --git a/src/components/Table/__tests__/__snapshots__/index.tsx.snap b/src/components/Table/__tests__/__snapshots__/index.tsx.snap new file mode 100644 index 0000000000..ba2e6163c6 --- /dev/null +++ b/src/components/Table/__tests__/__snapshots__/index.tsx.snap @@ -0,0 +1,1873 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Table should match a snapshot 1`] = ` + + + + + + + + + + + + + + + +
+ First Name + + Middle Name + + Last Name +
+ + + + + +
+`; diff --git a/src/components/Table/__tests__/index.tsx b/src/components/Table/__tests__/index.tsx new file mode 100644 index 0000000000..ca50860551 --- /dev/null +++ b/src/components/Table/__tests__/index.tsx @@ -0,0 +1,26 @@ +import * as React from 'react' +import { shallow } from 'enzyme' +import { Table } from '../index' +import toJson from 'enzyme-to-json' +import { makeData } from '../makeData' + +describe('Table', () => { + it('should match a snapshot', () => { + const data = [{ firstName: 'a', middleName: 'b', lastName: 'c' }] + const columns = [ + { + Header: 'First Name', + accessor: 'firstName' + }, + { + Header: 'Middle Name', + accessor: 'middleName' + }, + { + Header: 'Last Name', + accessor: 'lastName' + } + ] + expect(toJson(shallow())).toMatchSnapshot() + }) +}) diff --git a/src/components/Table/index.tsx b/src/components/Table/index.tsx new file mode 100644 index 0000000000..c5334a498a --- /dev/null +++ b/src/components/Table/index.tsx @@ -0,0 +1,46 @@ +import { useTable } from 'react-table' +import * as React from 'react' + +/** + * React-table currently don't implement types + * + */ +export interface TableProps { + columns: any[] + data: any[] +} + +export const Table = ({ columns, data }) => { + // Use the state and functions returned from useTable to build your UI + const { getTableProps, headerGroups, rows, prepareRow } = useTable({ + columns, + data + }) + + // Render the UI for your table + return ( +
+ + {headerGroups.map(headerGroup => ( + + {headerGroup.headers.map(header => ( + + ))} + + ))} + + + {rows.map( + row => + prepareRow(row) || ( + + {row.cells.map(cell => { + return + })} + + ) + )} + +
{header.render('Header')}
{cell.render('Cell')}
+ ) +} diff --git a/src/components/Table/makeData.ts b/src/components/Table/makeData.ts new file mode 100644 index 0000000000..b4b4dfb51f --- /dev/null +++ b/src/components/Table/makeData.ts @@ -0,0 +1,30 @@ +interface Person { + firstName: string + middleName: string + lastName: string +} + +const randomChar = () => { + let r = Math.random() + .toString(36) + .substring(7) + return r +} + +const newPerson = () => { + return { + firstName: randomChar(), + middleName: randomChar(), + lastName: randomChar() + } +} + +export const makeData = (length: number) => { + const data: Person[] = [] + for (let i = 0; i < length; i++) { + const person = newPerson() + data.push(person) + } + + return data +} diff --git a/src/components/Table/table.stories.tsx b/src/components/Table/table.stories.tsx new file mode 100644 index 0000000000..994077b33d --- /dev/null +++ b/src/components/Table/table.stories.tsx @@ -0,0 +1,24 @@ +import React from 'react' +import { makeData } from './makeData' +import { Table } from '.' +import { storiesOf } from '@storybook/react' + +storiesOf('Table', module).add('Normal Table', () => { + const data = makeData(10) + const columns = [ + { + Header: 'First Name', + accessor: 'firstName' + }, + { + Header: 'Middle Name', + accessor: 'middleName' + }, + { + Header: 'Last Name', + accessor: 'lastName' + } + ] + + return +}) diff --git a/yarn.lock b/yarn.lock index a4925013fb..23dfbf5ebb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9731,6 +9731,11 @@ react-syntax-highlighter@^8.0.1: prismjs "^1.8.4" refractor "^2.4.1" +react-table@7.0.0-alpha.35: + version "7.0.0-alpha.35" + resolved "https://registry.yarnpkg.com/react-table/-/react-table-7.0.0-alpha.35.tgz#6339afabe89cbf607a7ce37acf682d42985a3920" + integrity sha512-sQbHvNMf/FZsyCF3i2t5GdljSf58lOaTShC0rtibjWkD0ZOQTAiZpbjPNWpQ2sFmoOkneWMzEIBwzcZrRsEV7w== + react-test-renderer@^16.0.0-0: version "16.9.0" resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.9.0.tgz#7ed657a374af47af88f66f33a3ef99c9610c8ae9"