A simple and small yet robust API table UI package
npm install --save react-rapid-table
import React, { Component } from 'react'
import { Table } from 'react-rapid-table'
import 'react-rapid-table/dist/index.css'
class App extends Component {
render() {
return (
<Table
columns={[{ id: 'name' }, { id: 'age' }]}
rows={{
data: [
{ id: '1', name: 'beca', age: 10 },
{ id: '2', name: 'adam', age: 30 },
{ id: '3', name: 'cup', age: 3 }
]
}}
/>
)
}
}
Prop |
Type |
Description |
id? |
string |
HTML id attribute for the component wrapper |
columns |
TColumn[] |
n/a |
rows |
TTableRows |
n/a |
tbodyOptions |
TRowsOptions |
n/a |
otherOptions |
TOtherOptions |
n/a |
theadOptions? |
{ renderTheadCell? : ( cellValue: string | number, sortByTHeadColumnId?: TSortByTHeadColumnId ) => React.ReactNode | string | number } |
n/a |
Prop |
Type |
Description |
chidren |
React.ReactNode |
n/a |
styles? |
TTableThemeProviderPropsStyles |
n/a |
Prop |
Type |
Description |
id |
number | string |
n/a |
renderTbodyCell? |
(cellValue: any) => string | number | React.ReactNode |
n/a |
minFractionOrWidth? |
string |
n/a |
maxFractionOrWidth? |
string |
n/a |
Prop |
Type |
Description |
data? |
TRow[] |
n/a |
isLoading? |
boolean |
n/a |
error? |
any |
Any Error value thrown |
Prop |
Type |
Description |
id |
number | string |
n/a |
[key: string] |
any |
...rest |
Prop |
Type |
Description |
id? |
string | number | null |
n/a |
direction |
'asc' | 'desc' | null |
n/a |
Prop |
Type |
Description |
showNumbers? |
boolean | ((rowsNumber: number) => any) |
n/a |
renderError? |
(error: any) => string | number | React.ReactNode |
n/a |
renderLoading? |
() => string | number | React.ReactNode |
n/a |
onRowClick? |
(row: TRow) => void |
n/a |
Prop |
Type |
Description |
actionColumn? |
{ renderTheadCell? : (row: TRow) => string | number | React.ReactNode; renderTbodyCell : (row: TRow) => string | number | React.ReactNode; columnWidth? : string } |
n/a |
showNumbers? |
boolean | ((rowsNumber: number) => any) |
n/a |
TTableThemeProviderPropsStyles
Prop |
Type |
Description |
table? |
React.CSSProperties |
n/a |
thead? |
TReact.CSSProperties |
n/a |
tbody? |
RReact.CSSProperties |
n/a |
cell? |
React.CSSProperties |
n/a |
MIT © stanleyogada