@copart/row-select-table

Introduction

A Component for displaying large lists of tabular data from an external API.

Installation

yarn add @copart/row-select-table

Code Example

Component

import React from 'react'
import RowSelectTable from '@copart/row-select-table'

const column = (name, headerCellContent, other = {}) => ({
  name,
  headerCellContent,
  sortable: true,
  ...other
})

const results = [
  { id: 0, first_name: 'Leia', last_name: 'Skywalker', home_planet: 'Naboo' },
  { id: 1, first_name: 'Darth', last_name: 'Vader', home_planet: 'Tatooine' },
  {
    id: 2,
    first_name: 'Luke',
    last_name: 'Skywalker',
    home_planet: 'Tatooine'
  },
  { id: 3, first_name: 'Han', last_name: 'Solo', home_planet: 'Unknown' },
  { id: 4, first_name: 'Rey', last_name: '', home_planet: 'Jakku' },
  { id: 5, first_name: 'Kylo', last_name: 'Ren', home_planet: 'Unknown' }
]

const renderAction = () => <i className="material-icons">remove_red_eye</i>

const getColumnMetadata = () => [
  column('first_name', 'First Name', {}),
  column('last_name', 'Last Name', {}),
  column('home_planet', 'Home Planet', {})
]

const RowSelectTableExample = () => (
  <RowSelectTable
    columnMetadata={getColumnMetadata()}
    getRowId={(rowData) => rowData.id}
    noDataMessage={'No results found.'}
    setPage={() => {}}
    onRowClick={(rowData, e) => console.log('Row Clicked')}
    results={results}
    isLoading={false}
    changeSort={() => {}}
    setFilter={() => {}}
    maxPage={2}
    pageSize={20}
    currentPage={0}
    pageSizeOptions={[20, 40, 100]}
    showSortableColumns={false}
    stickyHeader={true}
  />
)

export default RowSelectTableExample

Actions File

import { getActions } from '@copart/row-select-table'

// Actions can be used to dispatch to Redux on the respective events.
const { ready, load, clear, failed, setPage, changeSort, setFilter } = getActions('componentName')

Reducers File

import { getReducer } from '@copart/row-select-table'

const componentReducer = (state = {}, action ) => {
	default:
		return state
}

export default getReducer(componentReducer, 'componentName', 20, '')

Props

Param	Type	Description
props	Object
props.results	Array.<Object>	The data used to populate the rows.
props.columnMetadata	Array.<ColumnMetadataObject>	Information about how to display each column.
props.getRowId	function	For helping React generate a unique key for each row. This function is called once with each object in props.results.
props.onRowClick	function	A function that is called with an object from props.results when the corresponding row is clicked (or when the Enter is pressed while selected).
props.changeSort	function	Takes a sortColumn and sortAscending value as parameters--called when a sortable column's header is clicked.
props.setPage	function	Takes an object with page property (and optionally, pageSize) to change the currentPage and pageSize props.
props.maxPage	number	The last available page in your results. (For pagination in footer.)
props.pageSize	number	The number of rows per page. (For pagination in footer.)
props.pageSizeOptions	Array.<number>	The different options the user should be able to set for pageSize. (For pagination in footer)
props.currentPage	number	The current page. (For pagination in footer)
props.isLoading	bool	Whether or not to display a spinner. Set this value to false when your AJAX request resolves.
props.sortColumn	string	The column currently being used to sort the results. (For sort icon in header.)
props.sortAscending	bool	True for ascending, false for descending. (For sort icon in header)
props.noDataMessage	function	A function that returns a component to be displayed when there is no data available. Should be customised from Parent.
props.footerLabels	Object	Object containing footer labels that are displayed in the Footer Section.
props.rowSelectionEnabled	bool	True if RowSelction is enabled, false if RowSelection is not required
props.onSelectAllRows	function	A function that is called when selectAllRows checkbox is clicked. Mandatory when rowSelectionEnabled is true
props.onSelectRow	function	A function that is called when a row is selected by clicking checkbox. Mandatory when rowSelectionEnabled is true
props.isRowSelected	function	A function that is called for every row to indicate if the row is selected or not. Mandatory when rowSelectionEnabled is true
props.isAllRowsSelected	bool	True if all rows are selected. False if all rows are not selected. Mandatory when rowSelectionEnabled is true
props.showSortableColumns	bool	Optional prop that allows user to hide default icon for sortable icons. Defaulted to true. Pass false to hide icon
props.stickyHeader	bool	Optional prop that controls whether the header of the table is sticky when scrolling. Stickiness will cause the header to stay at the top even when scrolling past
props.stickyFooter	bool	Optional prop that controls whether the footer of the table is sticky when scrolling. Stickiness will cause the header to stay at the top even when scrolling past

getActions('ComponentName') returns to you set of Actions that are component specific and allow you to dispatch unique actions and have multiple RowSelectTables throughout the application.

getReducer(componentReducer, componentName, initalPageSize, initialSortColumn )

RowSelectTable~ColumnMetadataObject

Configuration for your columns.

Kind: inner typedef of RowSelectTable Properties

Name	Type	Default	Description
columnName	string		A key that matches a key in your props.results objects.
headerCellContent	string | number | React.Element		The content of this column's header cell.
display	function	(val) => val	An optional function to transform your data in results before displaying it in the table. Should return a valid React node.
sortable	bool	false	Whether to allow sorting by clicking the column header.

Contributions

Contributions are welcome, create a Pull Request for any improvements/fixes.