smartameer / react-table-lib

React Table Library

React Table

Installation

yarn add react-table-lib

Usage

import Table from 'react-table-lib'

• Basic Table

  const data = [
    { name: "Earline Stokes", age: 30 },
    { name: "Amina Bergstrom", age: 25 },
    { name: "Kattie Hoppe", age: 20 }
  ]
  
  return (
    <Table data={data}>
  )

• Column mapped

  const data = [
    { name: "Earline Stokes", age: 30 },
    { name: "Amina Bergstrom", age: 25 },
    { name: "Kattie Hoppe", age: 20 }
  ]
  
  const columns = {
    name: { label: "Full Name", sortable: true },
    age: { label: "Age", format: (data) => data + 'yrs' }
  }
  
  return (
    <Table data={data} columns={columns}>
  )

• Selectable

  const data = [
    { name: "Earline Stokes", age: 30 },
    { name: "Amina Bergstrom", age: 25 },
    { name: "Kattie Hoppe", age: 20 }
  ]
  
  const columns = {
    name: { label: "Full Name", sortable: true },
    age: { label: "Age", format: (data) => data + 'yrs' }
  }
  
  const handleSelect = (data) => {
    // do something
    // data [{ name: "Earline Stokes", age: 30 }]
  }
  
  return (
    <Table data={data} columns={columns} selectable="multiple" onSelect={handleSelect}>
  )

Table Properties

Props/Methods	Default	Type	Required	Details
data	-	array	true	Table Records in array format with each entry holding key : value pair
columns	{}	object	false	Each property for data's entry's header property Ref: Columns
selectable	-	'single' 'multiple'	false	Selectable option to select table record based on type single or multiple
onSelect	-	function	false	Callback to get selected records details. callback data: record (or) array of records

Columns Properties

Property	type	Details
label	string	Table Header column name
sortable	boolean	Column sortable property
format	function	Formatting table record for the same column

Demo

Code Sandbox

Note: Please run yarn storybook to see demo. You can run this in your local too to check the same