0.0.7 • Published 4 years ago
react-compact-table v0.0.7
react-compact-table
- This is compact & easy to use react-compact-table (render props pattern & using styled components)
Getting Started
npm install react-compact-table --save
Dependancies
- styled-components
- lodash
Demo
https://cicada1992.github.io/react-compact-table/
TableProps
Property | Type | Required? | Description | ||
---|---|---|---|---|---|
data | T[] | ✓ | inject your data (array) ✓ | TableColumn | |
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 | sort order related to clicked specific header label |
TableColumnProps
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 |
Basic Usage
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>