SortableTable

SortableTable is a React Component wrapper around https://react-table.js.org ReactTable. Any functionality from ReactTable should be available in SortableTable out of the box, but may require styling. For more, see ReactTable docs

Source:

Extends

  • Component

Members

(inner) handleClick()

Handle click on table row

Source:

(inner) handleFilterInput()

Update state when filter is changed

Source:

(inner) renderColumnFilter()

Uses props to determine if Column Filters should be shown

Source:

(inner) SortableTable propTypes :propTypes

Source:
Properties:
Name Type Description
collection Object

collection to get data from

columnMetadata Array

provides filtered columns with i18n headers

data Array

provides array of objects to be used in place of publication data

defaultPageSize Number

how many results per page

filterType Boolean

filter by table, column, or both

filteredFields Array

provides filtered columns, use columnMetadata instead

isFilterable Boolean

show / hide column filter

isResizeable Boolean

allow resizing of table columns

isSortable Boolean

allow column sorting

matchingResultsCount String

provides Count publication to get count from

minRows Number

minimum amount of rows to display in table

noDataMessage String

text to display when no data is available

onRowClick function

provides function / action when clicking on row

publication String

provides publication to get Meteor data from

query object

provides query for publication filtering

selectedRows Array

provides selected rows in the table

transform function

transform of collection for grid results

Type:
  • propTypes

Methods

(inner) customFilter()(filter, row) → {String|Boolean}

Replace default filter with customized filter, custom filter is case insensitive custom filter searches entire string, not just from string start

Source:
Parameters:
Name Type Description
filter Object

user-typed data

row Object

row info for associated filter

Returns:

replacement filter

Type
String | Boolean

(inner) displayNoResultsFound()() → {node}

This function displays a 'No Results Found' when there is no data to populate the table

Source:
Returns:

returns a JSX node or empty string

Type
node

(inner) getMeteorData()() → {Object}

Absorb publication / collection information from props, output data from subscription. Use props to get collection, use that information to call Meteor to get subscription and output data for table.

Source:
Properties:
Name Type Description
matchingResultsCount String

Send to Counts collection to get results count of sub

publication String

publication to subscribe to

collection Object

collection to get data from

Returns:

loading status (bool), results (object), and matchingResults (number)

Type
Object

(inner) getTableData()() → {Number}

Checks if JSON data is passed vs publication data

Source:
Returns:

returns number of available data

Type
Number

(inner) renderColumns()() → {Object}

Absorb columnMetadata information from props, output columns to display

Source:
Properties:
Name Type Description
columnMetadata String

Object of data field, column header

Returns:

data filed (string), translated header (string), and minWidth (number / undefined)

Type
Object

(inner) renderData()() → {Object}

Take data from getMeteorData() and filter if needed, or spit out raw if no filter

Source:
Returns:

data filed (string), translated header (string), and minWidth (number / undefined)

Type
Object

(inner) renderTableFilter()() → {node}

Uses props to determine if a Table Filter should be shown

Source:
Returns:

returns JSX node or null

Type
node

(inner) selectedRowsClassName()(rowInfo) → {String}

If any rows are selected, give them a className of "selected-row"

Source:
Parameters:
Name Type Description
rowInfo object

row data passed in from ReactTable

Returns:

className to apply to row that is selected, or empty string if no row is selected

Type
String