React-table-lib NPM

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

@everything-registry/sub-chunk-2616

0.1.0

1 year ago