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) ✓
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

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>