This repository has been archived by the owner on Aug 31, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #107 from Synthetixio/feat/table
feat: add table component
- Loading branch information
Showing
8 changed files
with
416 additions
and
37 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| { | ||
| "typescript.tsdk": "node_modules/typescript/lib" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,95 @@ | ||
| import { ComponentMeta, ComponentStory } from '@storybook/react'; | ||
| import { Card } from 'components/Card/Card'; | ||
| import { Column } from 'react-table'; | ||
|
|
||
| import { Table } from './Table'; | ||
|
|
||
| export default { | ||
| title: 'Table', | ||
| component: Table, | ||
| decorators: [(Story) => <Story />] | ||
| } as ComponentMeta<typeof Table>; | ||
|
|
||
| const Template: ComponentStory<typeof Table> = (args) => ( | ||
| <Card variant='dark-blue'> | ||
| <Table {...args} /> | ||
| </Card> | ||
| ); | ||
|
|
||
| export const Primary = Template.bind({}); | ||
|
|
||
| type Crypto = { | ||
| coin: string; | ||
| symbol: string; | ||
| price: number; | ||
| percent1H: number; | ||
| percent24H: number; | ||
| percent7D: number; | ||
| last7Days: string; | ||
| }; | ||
|
|
||
| const data: Crypto[] = [ | ||
| { | ||
| coin: 'Synthetix', | ||
| symbol: 'sUSD', | ||
| price: 11, | ||
| percent1H: -1.3, | ||
| percent24H: -3.5, | ||
| percent7D: -8.6, | ||
| last7Days: 'https://picsum.photos/50' | ||
| }, | ||
| { | ||
| coin: 'Synthetix', | ||
| symbol: 'SNX', | ||
| price: 2.71, | ||
| percent1H: -5.3, | ||
| percent24H: 9.5, | ||
| percent7D: 2.6, | ||
| last7Days: 'https://picsum.photos/50' | ||
| } | ||
| ]; | ||
|
|
||
| const columns: Column<Crypto>[] = [ | ||
| { | ||
| disableSortBy: true, | ||
| Header: 'Coin', | ||
| accessor: 'symbol', | ||
| columnClass: 'ui-text-left', | ||
| cellClass: 'ui-text-left', | ||
| Cell: ({ row }) => ( | ||
| <div className='ui-flex ui-items-center'> | ||
| <img | ||
| alt='' | ||
| className='ui-w-6 ui-h-6 ui-rounded-full ui-mr-3' | ||
| src='https://picsum.photos/50' | ||
| /> | ||
| <span className='ui-tg-caption-bold lg:ui-tg-content-bold'>{row.original.symbol}</span> | ||
| <span className='ui-hidden ui-tg-content ui-ml-3 lg:ui-block'>{row.original.coin}</span> | ||
| </div> | ||
| ) | ||
| }, | ||
| { | ||
| Header: 'Price', | ||
| accessor: (row) => row.price, | ||
| sortType: (a, b) => a.original.price - b.original.price | ||
| }, | ||
| { | ||
| Header: '1h', | ||
| accessor: 'percent1H', | ||
| Cell: (row) => row.value, | ||
| sortType: (a, b) => a.original.percent1H - b.original.percent1H | ||
| }, | ||
| { | ||
| Header: '7h', | ||
| accessor: 'percent7D', | ||
| Cell: (row) => row.value, | ||
| sortType: (a, b) => a.original.percent7D - b.original.percent7D | ||
| } | ||
| ]; | ||
|
|
||
| Primary.args = { | ||
| className: '', | ||
| data: [...data, ...data], | ||
| columns: columns, | ||
| initialState: { pageSize: 3 } | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,139 @@ | ||
| /* eslint-disable react/jsx-key */ | ||
| import clsx from 'clsx'; | ||
| import { Icon } from 'components/Icon/Icon'; | ||
| import { Pagination, PaginationLocalization } from 'components/Pagination/Pagination'; | ||
| import React, { ReactElement, ReactNode, useMemo } from 'react'; | ||
| import { | ||
| Row, | ||
| TableHeaderProps, | ||
| TableOptions, | ||
| useFlexLayout, | ||
| usePagination, | ||
| useSortBy, | ||
| useTable | ||
| } from 'react-table'; | ||
|
|
||
| export interface TableProps<T extends Record<string, unknown>> extends TableOptions<T> { | ||
| className?: string; | ||
| paginationLocalization?: PaginationLocalization; | ||
| onClick?: (row: Row<T>) => void; | ||
| } | ||
|
|
||
| export const Table = <T extends Record<string, unknown>>(props: TableProps<T>): ReactElement => { | ||
| const { className, paginationLocalization, onClick, ...rest } = props; | ||
|
|
||
| const defaultColumn = useMemo( | ||
| () => ({ | ||
| width: 150, | ||
| minWidth: 100 | ||
| }), | ||
| [] | ||
| ); | ||
|
|
||
| const tableInstance = useTable( | ||
| { ...rest, defaultColumn }, | ||
| useSortBy, | ||
| useFlexLayout, | ||
| usePagination | ||
| ); | ||
|
|
||
| const { | ||
| headerGroups, | ||
| prepareRow, | ||
| getTableProps, | ||
| getTableBodyProps, | ||
| page, | ||
| state, | ||
| gotoPage, | ||
| rows | ||
| } = tableInstance; | ||
|
|
||
| const { pageIndex, pageSize } = state; | ||
|
|
||
| return ( | ||
| <> | ||
| <div className={clsx('ui-overflow-auto', className)}> | ||
| <table {...getTableProps()} className='ui-w-full'> | ||
| <thead> | ||
| {headerGroups.map((headerGroup) => ( | ||
| <tr {...headerGroup.getHeaderGroupProps()}> | ||
| {headerGroup.headers.map((column) => ( | ||
| <TableHeader | ||
| className={clsx( | ||
| 'ui-text-gray-500 ui-select-none ui-p-2 ui-tg-caption-bold lg:ui-tg-content-bold ui-transition-colors', | ||
| column.columnClass || 'ui-text-right', | ||
| { | ||
| 'hover:ui-text-primary': column.canSort | ||
| } | ||
| )} | ||
| {...column.getHeaderProps(column.getSortByToggleProps())} | ||
| > | ||
| <> | ||
| {column.render('Header')} | ||
| <span> | ||
| {column.isSorted && ( | ||
| <Icon | ||
| className='ui-text-xs ui-ml-1' | ||
| name={column.isSortedDesc ? 'Top' : 'Bottom'} | ||
| /> | ||
| )} | ||
| </span> | ||
| </> | ||
| </TableHeader> | ||
| ))} | ||
| </tr> | ||
| ))} | ||
| </thead> | ||
|
|
||
| <tbody {...getTableBodyProps()}> | ||
| {page.map((row) => { | ||
| prepareRow(row); | ||
| return ( | ||
| <tr | ||
| onClick={() => onClick?.(row)} | ||
| {...row.getRowProps()} | ||
| className={clsx( | ||
| 'ui-text-white ui-border-t last:ui-border-b ui-border-solid ui-border-gray-700', | ||
| { | ||
| 'ui-cursor-pointer': !!onClick | ||
| } | ||
| )} | ||
| > | ||
| {row.cells.map((cell) => ( | ||
| <td | ||
| className={clsx( | ||
| 'ui-p-2 ui-tg-caption lg:ui-tg-content', | ||
| cell.column.cellClass || 'ui-text-right' | ||
| )} | ||
| {...cell.getCellProps()} | ||
| > | ||
| <span className='ui-inline-flex ui-items-center ui-h-full'> | ||
| {cell.render('Cell') as ReactNode} | ||
| </span> | ||
| </td> | ||
| ))} | ||
| </tr> | ||
| ); | ||
| })} | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| <Pagination | ||
| className='ui-mt-6 ui-w-full' | ||
| gotoPage={gotoPage} | ||
| length={rows.length} | ||
| localization={paginationLocalization} | ||
| pageIndex={pageIndex} | ||
| pageSize={pageSize} | ||
| /> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| interface HeaderProps extends TableHeaderProps { | ||
| children: React.ReactNode; | ||
| } | ||
|
|
||
| const TableHeader: React.FC<HeaderProps> = ({ children, ...props }) => { | ||
| return <th {...props}>{children}</th>; | ||
| }; |
Oops, something went wrong.