React-rapid-table NPM

React-Rapid-Table

A simple and small yet robust API table UI package

Install

npm install --save react-rapid-table

Usage

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 }
          ]
        }}
      />
    )
  }
}

API

Components

Table

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

TableThemeProvider

Prop	Type	Description
chidren	React.ReactNode	n/a
styles?	TTableThemeProviderPropsStyles	n/a

Hooks

useRows

useThead

Types

TColumn

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

TTableRows

Prop	Type	Description
data?	TRow[]	n/a
isLoading?	boolean	n/a
error?	any	Any Error value thrown

TRow

Prop	Type	Description
id	number \| string	n/a
key: string	any	...rest

TSortByTHeadColumnId

Prop	Type	Description
id?	string \| number \| null	n/a
direction	'asc' \| 'desc' \| null	n/a

TRowsOptions

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

TOtherOptions

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

License

styled-components

@everything-registry/sub-chunk-2605

2 years ago

2 years ago

2 years ago

2 years ago