Global

Methods

calculateRange(data, pageSize) → {Array}

Calculate the range of the table

Parameters:
Name Type Description
data Array.<Object>

Global Data
pageSize Number

Page size
Source:
Returns:

An array containing page numbers

Type
Array

EntriesDisplayer(props) → {React.ReactElement}

Component for the entries counter

Parameters:
Name Type Description
props Object

Current page number

Properties
Name Type Description
currentPage Number

Current page number
pageSize Number

Page size
filteredData Array.<Object>

filtered Data
slice Array.<Object>

Data slice displayed in the table
Source:
Returns:
Type
React.ReactElement

Component for the footer section

Parameters:
Name Type Description
props Object
Properties
Name Type Description
range Array.<Number>

Table range
setCurrentPage function

Function to update currentPage value
currentPage Number

Current page number
slice Array.<Object>

The slice of data displayed in the table
filteredData Array.<Object>

The filtered data
pageSize Number

Page size
displayEntries Boolean

Control if the entries counter should be displayed or not
Source:
Returns:
Type
React.ReactElement

handleOrdering(key, ordering, setOrdering) → {void}

Handle table ordering, called when user click on any th

Parameters:
Name Type Description
key String
ordering Object

Object containing the targeted property and the order
setOrdering function

Update ordering values
Source:
Returns:

Update the ordering state

Type
void

Component for the header section

Parameters:
Name Type Description
props Object
Properties
Name Type Description
selectPageSize Boolean

Control if the page size selector should be displayed or not
pageSize Number

Page size
setPageSize function

Function to update pageSize value
pageSizeOptions Array.<Number>

Provide options for the page size. Example: [25, 50, 100]
searchString String

The search string from input search
setSearchString function

Function to update searchString value
allowSearch Boolean

Control if the search section should be displayed or not
Source:
Returns:
Type
React.ReactElement

Pagination(props) → {React.ReactElement}

Component for the pagination section

Parameters:
Name Type Description
props Object
Properties
Name Type Description
range Array.<Number>

Table range
setCurrentPage function

Function to update currentPage value
currentPage Number

Current page number
Source:
Returns:
Type
React.ReactElement

ReactTable(props) → {React.ReactElement}

React table main component

Parameters:
Name Type Description
props object
Properties
Name Type Attributes Description
data Array.<object>

Any data.
headers Array.<object>

Each object must have two properties : a name to display and a key which refers to the corresponding data property exemple: [{name: First Name, key: firstName}]
pageSizeOptions Array.<number> <optional>

An array providing options to configure the number of rows per page. Exemple: [25, 50, 100]
displayEntries boolean <optional>

Disable entries displayer by setting it to false
allowSearch boolean <optional>

Disable search input by setting it to false
selectPageSize boolean <optional>

Disable select input by setting it to false
Source:
Returns:
Type
React.ReactElement

SelectPageSize(props) → {React.ReactElement}

Parameters:
Name Type Description
props Object
Properties
Name Type Description
pageSize Number

Page size
setPageSize function

Function to update pageSize value
pageSizeOptions Array.<Number>

Provide options for the page size. Example: [25, 50, 100]
Source:
Returns:
Type
React.ReactElement

sliceData(data, currentPage, pageSize) → {Array}

Calculate the slice of data to display

Parameters:
Name Type Description
data Array.<Object>

Global data
currentPage Number

The current Page Number
pageSize Number

The Page size
Source:
Returns:

A slice of data

Type
Array

Table(props) → {React.ReactElement}

Component for the table

Parameters:
Name Type Description
props Object
Properties
Name Type Description
headers Array.<Object>

Headers to config the table th
slice Array.<Object>

A slice of data to display in the table
ordering Object

Ordering state
setOrdering function

Function to update ordering
Source:
Returns:
Type
React.ReactElement

TableBody(props) → {React.ReactElement}

Table body component

Parameters:
Name Type Description
props Object
Properties
Name Type Description
slice Array.<Object>

A slice of data to display in the data
Source:
Returns:
Type
React.ReactElement

TableHeader(props) → {React.ReactElement}

Table header component

Parameters:
Name Type Description
props Object
Properties
Name Type Description
headers Array.<Object>

Array containg the headers
ordering Object

Ordering state
setOrdering function

Function to update ordering
Source:
Returns:
Type
React.ReactElement

TableSearch(props) → {React.ReactElement}

Component for the search section

Parameters:
Name Type Description
props Object
Properties
Name Type Description
searchString String

The search string
setSearchString function

Function to update searchString value
Source:
Returns:
Type
React.ReactElement

useOrdering(data, ordering) → {Array.<object>}

Custom hook used to sort the data

Parameters:
Name Type Description
data Array.<object>

Data to sort
ordering Object

Example: { order: "ascending", property: "firstName" }
Source:
Returns:

Sorted data

Type
Array.<object>

usePagination(data, currentPage, pageSize, ordering) → {Object}

Custom hook used for pagination

Parameters:
Name Type Description
data Array.<Object>

Data
currentPage Number

Current page number
pageSize Number

Page size
ordering Object

Example: { order: "ascending", property: "firstName" }
Source:
Returns:

Object containing a data slice and the table range

Type
Object

useSearch(data, searchString) → {Array.<Object>}

Custom hook used to filter the array

Parameters:
Name Type Description
data Array.<Object>

globalData
searchString String

Search string from the input search
Source:
Returns:

Filtered data

Type
Array.<Object>