Last active
March 2, 2020 14:58
-
-
Save jcarroll2007/886043246c15c417e28d2aaccb8590f0 to your computer and use it in GitHub Desktop.
This file contains hidden or 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
| const TitleSubtitleCell => ({ title, subtitle }) => ( | |
| <div> | |
| <Title>{title}</Title> | |
| <SubTitle>{subtitle}</SubTitle> | |
| </div> | |
| ) | |
| const columns = [{ | |
| header: | |
| width: 'grow', // A width props supports custom column sizing | |
| // text styles per column can handle custom text styles for a header | |
| headerTextStyles: { | |
| color: 'red', | |
| weight: 'medium' | |
| }, | |
| // title is a static title for the column header | |
| title: 'Error Type', | |
| // defines whether the column is sortable or not | |
| sortable: true, | |
| // the key of the row to sort this column by | |
| sortKey: 'title', | |
| // define how the alignment of the column and its cells should be | |
| align: 'right', // 'left' | 'center' | |
| // cell specific definitions allows for completely custom cells | |
| cell: { | |
| // we could build a library of custom cell types that could be used like this | |
| // to allow for ease of use and separate logic across custom cell components | |
| component: TitleSubtitleCell, | |
| // this function would map a row to the props necessary for the custom cell component | |
| mapRowToProps: ({ status, date }) => ({ title: status, subtitle: date }) | |
| } | |
| }, { | |
| // a simple column might just define a title | |
| title: 'Request Body', | |
| // a simple cell might just define the key of a row that should be rendered as the cell value | |
| cell: { | |
| value: 'requestBody' | |
| } | |
| }] | |
| // We could support global table options that are applied, in this example, to all headers | |
| // but could be overridden in the more specific column definitions. | |
| const headerProps = { | |
| displayVariant: 'filled', // has a grey background or 'default' has a white background | |
| // text styles to pass to all column headers but can be overridden for each column | |
| textStyles: { | |
| color: 'blue' | |
| }, | |
| sticky: true // support sticky table header | |
| } | |
| const rows = [{ | |
| status: '404', | |
| date: '2/2/2020', | |
| requestBody: 'this is the request body' | |
| }, { | |
| status: '404', | |
| date: '2/1/2020', | |
| requestBody: 'this is the request body' | |
| }] | |
| const DefaultTableStory = ( | |
| <Table | |
| headerProps={headerProps} | |
| rows={rows} | |
| columns={columns} | |
| /> | |
| ) | |
| function MyTable() { | |
| const Header = useHeader({ | |
| }) | |
| return ( | |
| <Table | |
| /> | |
| ) | |
| } | |
| function MyTable() { | |
| const Columns = useColumns([{ | |
| title: 'First Name', | |
| headerCell: useHeaderCell(CustomSortableCell), | |
| sorting: useSorting(true, 'firstName', true), | |
| align: 'left', | |
| cell: useCell(TitleSubtitleCell, ({ firstName, middleInitial }) => ({ title: firstName, subtitle: middleInitial })), | |
| }, { | |
| title: 'Title', | |
| align: 'right', | |
| cell: useCell(TableCell, 'title') | |
| }]) | |
| return <Table /> | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment