Giter VIP home page Giter VIP logo

react-rapid-table's Introduction

React-Rapid-Table

A simple and small yet robust API table UI package

NPM JavaScript Style Guide

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

MIT © stanleyogada

react-rapid-table's People

Contributors

stanleyogada avatar chineduogada avatar

Stargazers

Ogbonnaya Johnson avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.