@ubc-farm/table-base

Basic Table component for React that takes a JSON array and column descriptor elements to render a table.

import TableBase, { Column } from '@ubc-farm/table-base';

const tableData = [
  {id: 1, name: "name1", price: 100},
  {id: 2, name: "name2", price: 120},
  {id: 3, name: "name3", price: 130},
  {id: 4, name: "name4", price: 140},
  {id: 5, name: "name5", price: 110}
];

<TableBase tableData={tableData}>
	<Column field="id" isKey>ID</Column>
	<Column field="name">Name</Column>
	<Column field="price"><em>Price ($)</em></Column>
</TableBase>

Usage

Table props

name	type	description
children	Column[]	Column descriptors
tableData	Object[]	Data to render
keyField	string	The key field in each object. Can alternatively be specified in the Column
rowClassName	`string	function`
tableClassName	string	Class for the table container.
headClassName	string	Class for the table head
bodyClassName	string	Class for the table body
headRowClassName	string	Class for the row inside the table head
onRowClick	function	Click handler with (row, event) arguments
onRowMouseEnter	function	Mouse enter handler with (row, event) arguments
onRowMouseLeave	function	Mouse leave handler with (row, event) arguments
onMouseEnter	function	Mouse enter handler for the entire table
onMouseLeave	function	Mouse leave handler for the entire table

Column props

name	type	description
field	string	The object key this column corresponds to
children	ReactNode	Content to show in the table header cell
isKey	boolean	Sets the column as the key field for each JSON object. Alternative to Table keyField
format	function	Function to format cell data: (cell, row) => ReactNode
hidden	boolean	If true, column is hidden from view
columnClassName	`string	function`
headerClassName	string	Class for the header cell corresponding to the column
onHeaderClick	function	Click event for the header cell
onCellClick	function	Click handler for cells in this column (takes (cell, row, rowIndex)).