- This is compact & easy to use react-compact-table (render props pattern & using styled components)
npm install react-compact-table --save
- styled-components
- lodash
https://cicada1992.github.io/react-compact-table/
Property | Type | Required? | Description |
---|---|---|---|
data | T[] | ✓ | inject your data (array) ✓ |
minWidth | string | If you want to set minWidth, apply this. | |
maxHeight | string | maxHeight means body's max height. If table body's height exceed this, will be scrollable. | |
headerBgColor | string | default: #ffffff | |
headerFontSize | string | default: 12px | |
headerFontColor | string | default: black | |
headerHeight | string | default: 22px | |
rowHeight | string | default: auto (depends on content) | |
renderFooterChildren | () => React.ReactNode | If you need footer, use this | |
footerColor | string | default: none | |
selectable | boolean | activate to select (radio button in first column) | |
selectedId | string | inject selected id | |
noRadioButton | boolean | you can apply selectable row without radio button | |
onRowClick | (id: string) => void | inject callback function to change clicked id | |
removable | boolean | activate to remove (be added X icon end of each row) | |
onRemoveClick | (id: string) => void | inject callback function to remove clicked id | |
sortable | boolean | activate to sort (If you click header label, will be added sorting icon end of each header) | |
currentSortKey | keyof T | sort key (same as data key) | |
currentSortOrder | SortOrder | desc or asc | |
onHeaderClick | (sortKey: keyof T) => void | inject callback function to change sort key |
Property | Type | Required? | Description |
---|---|---|---|
dataKey | string | ✓ | matched key as your data |
label | string | header label | |
help | React.ReactNode | tooltip (inactive now, fixing minor bug) | |
width | string | default: 10% of table width | |
align | string | default: left | |
cellAlign | string | if you want to apply align separately between header and cell, use this |
interface DataItem {
id: string;
name: string;
conversions: number;
}
const data: DataItem[] = [
{ id: 'id-0', name: 'DongYoon', conversions: 23242424 },
{ id: 'id-1', name: 'SangBoak', conversions: 1234 },
{ id: 'id-2', name: 'MoonSik', conversions: 3 },
{ id: 'id-3', name: 'Heejin', conversions: 7211233123 },
{ id: 'id-4', name: 'Youngjae', conversions: 312 }
];
<Table data={data}>
<TableColumn<DataItem, 'name'>
dataKey="name"
label="Name"
help="this is pure text"
align="left"
>
{({ value }) => <Text>{value}</Text>}
</TableColumn>
<TableColumn<DataItem, 'conversions'>
dataKey="conversions"
label="Conversions"
help={<div>I'm react node</div>}
align="right"
>
{({ value }) => <Text>{formatNumber(value) || 0}</Text>}
</TableColumn>
</Table>