Frame-one-table NPM

➡️ Try out the table in the Storybook! ⬅️

version 0.2.0 had some big changes to how data is passed around, will document eventually

Installation

npm

npm install frame-one-table

yarn

yarn add frame-one-table

Usage

Use Frame One Table's TableGenerator component like any React component; and pass it props to configure your table as desired.

import * as React from 'react'
import {TableGenerator} from "frame-one-table";

class Example extends React.Component {
  render () {
    return (
      <TableGenerator
        columnOptions={[]}
        data={[]}
      />
    )
  }
}

Props

Table Generator `TableGeneratorProps`

Prop	Type	Description
`data`	`TableData`	Pass in the data here to be rendered
`columnOptions`	`ColumnOption[]`	Options to determine the rendering of each column
`paginatorProps`	`IPaginatorProps[]`	Props for controlling the paginator
`sortable`	`boolean`	Determine a default for each column as sortable. This can be overridden by the columnOptions
`showSortIcons`	`boolean`	Toggle to hide or show the arrow icons in the header cells when a column is sortable. Defaults true
`showHeader`	`boolean`	Hide or show the header row. Defaults true
`showBody`	`boolean`	Hide or show the body part of the table. Not sure why you would want to hide it if you are using this library. Defaults true
`headerClassName`	`string`	className applied to the header row
`rowClassName`	`string`	className applied to each row in the body
`headerCellClassName`	`string`	className applied to each cell in the header row
`rowCellClassName`	`string`	className applied to each cell in the table body
`headerStyle`	`CSSProperties`	style tag applied to the header row
`rowStyle`	`CSSProperties`	style tag applied to each row in the body
`headerCellStyle`	`CSSProperties`	style tag applied to each cell in the header row
`rowCellStyle`	`CSSProperties`	style tag applied to each cell in the table body
`rowFilter`	`ContextFunctionRow<boolean>`	filter out rows that are shown // TODO
`paginationControlsRender`	`ContextFunctionPagination<ReactNode>`	create your own pagination controls // TODO
`loading`	`boolean`	loading, its nice to use this instead of increment loading since we can just block a table // TODO
`loadingOverlay`	`ContextFunctionData<ReactNode>`	loading, its nice to use this instead of increment loading since we can just block a table // TODO

Column Options `ColumnOption`

Prop	Type	Description
`key`	`string` `number`	key that is used to extract the correct value from the row's object (string) or array (number)
`headerValue`	`any`	Label for the header cell (ie. First Name)
`valueFormatter`	`ContextFunctionCell<any>`	Format function to run the values for the column's body cells through before displaying them (ie. (height) => height + "cm"). Does not modify the value used to compare for sorting the column
`headerRender`	`ContextFunctionCell<ReactNode>`	Custom render function for the header cell
`cellRender`	`ContextFunctionCell<ReactNode>`	Custom render function for the body cells of this column
`headerCellClassName`	`string`	className applied to the header cell
`rowCellClassName`	`string`	className applied to the body cells of this column
`headerCellStyle`	`CSSProperties`	style tag applied to the header cell
`rowCellStyle`	`CSSProperties`	style tag applied to the body cells of this column
`sortable`	`boolean`	Toggle if this column can be sorted. Takes precedent over the "sortable" prop from TableGeneratorProps
`showSortIcons`	`boolean`	Toggle to hide or show the arrow icons in the header cell if the column is sortable. Takes precedent of the "showSortIcons" props from TableGeneratorProps
`sortFunction`	`(a: any, b: any, aRow: TableDataEntry, bRow: TableDataEntry, data: TableData, columns: ColumnOption[], sortConfiguration: ISortStyle) => number`	Custom sort function for the column where a & b are the values. If not custom sort is applied, the library will attempt to sort automatically based on the primitive data type
`hidden`	`boolean`	Toggle for hiding a column... Perhaps if a column becomes hidden based on certain conditions on your end, change this to false instead of creating a whole new set of column options

Paginator Props `IPaginatorProps`

Prop	Type	Description
`show`	`boolean`	Show or hide the paginator. Defaults false
`limitLabel`	`string`	String shown next to the drop-down for choosing the limit (ie. Showing X - Y of Z)
`currentLimit`	`number`	Currently selected limit for the table
`limitOptions`	`number[]`	Array of numbers representing options for what limits can be chosen via the drop-down
`total`	`number`	Total number of results in the table or pool of data. Used to calculate the last index for the "go to last" button
`onLimitChange`	`(newLimit: number) => void`	Handler for changing the limit per page via the drop-down
`enableGoPrevious`	`boolean`	Toggle for if the "go to first" and "previous" buttons should be enabled
`enableGoNext`	`boolean`	Toggle for if the "go to last" and "next" buttons should be enabled
`showGoToFirstButton`	`boolean`	Hide or show the "go to first" button. Defaults true
`showGoToLastButton`	`boolean`	Hide or show the "go to last" button. Defaults true
`currentOffset`	`number`	Current offset of the pagination, indexed at 0
`availableOffsets`	`number[]`	Array of numbers for which pages should be accessible via the paginator (indexed at 0 - ie. 0, 1, 2, 3, 4, will be displayed as 1, 2, 3, 4 ,5 by the library)
`onOffsetChange`	`(newOffset: number) => void`	Handler for changing the selected offset page

Table Data Types

Name	Type	Notes
`TableDataEntryArray`	`any[]`	// TODO; currently not supported
`TableDataEntryJSON`	`{[key: string]: any}`
`TableData`	`Array<TableDataEntryArray>` or `Array<TableDataEntryJSON>`	The data for the table
`TableDataEntry`	`TableDataEntryArray` or `TableDataEntryJSON`	Represents a single row
`TableDataEntry`	`TableDataEntryArray` or `TableDataEntryJSON`	Represents a single row

Context Helpers

Name	Type
`ContextFunctionData<R>`	`(data: TableData) => R`
`ContextFunctionCell<R>`	`(value: any, row: TableDataEntryArray or TableDataEntryJSON, key: string or number, data: TableData, index?: number) => R`
`ContextFunctionRow<R>`	`(row: TableDataEntryArray or TableDataEntryJSON, key: string or number, data: TableData, index?: number) => R`
`ContextFunctionPagination<R>`	`(pageSize: number, pageIndex: number, goToPage: (page: number) => void, data: TableData) => R`