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:
Source:
Returns:

class

Type
Class

Extends

  • Component

Members

(inner) handleCellClick

Handle click on table cell

Source:

(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

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

query object

GraphQL query object

selectedRows Array

provides selected rows in the table

transform function

transform of collection for grid results

Type:
  • propTypes

(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(numRows) → {node}

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

Source:
Parameters:
Name Type Description
numRows Number

Number of rows in current set of data

Returns:

returns a JSX node or empty string

Type
node

(inner) filterData(data) → {Object}

Filter supplied data if needed, or spit out raw if no filter

Source:
Parameters:
Name Type Description
data Array

An array of objects

Returns:

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

Type
Object

(inner) handleBulkActionsSelect(action) → {undefined}

Handle bulk action select

Source:
Parameters:
Name Type Description
action String

Bulk action name

Returns:

No return value

Type
undefined

(inner) handleToggleAll() → {undefined}

Toggle selection state for all rows

Source:
Returns:

No return value

Type
undefined

(inner) handleToggleSelection(key, shift, row) → {undefined}

Return selected state for a given row key

Source:
Parameters:
Name Type Description
key String

Row key field value

shift Boolean

Shift key was pressed

row Object

Row data

Returns:

No return value

Type
undefined

(inner) isRowSelected(key) → {Boolean}

Return selected state for a given row key

Source:
Parameters:
Name Type Description
key String

Row key field value

Returns:

A boolean value for the selected state of the row

Type
Boolean

(inner) renderBulkActionsSelect() → {Node}

Renders the bulk action select component

Source:
Returns:

React node

Type
Node

(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) renderTableFilter(numRows) → {node}

Uses props to determine if a Table Filter should be shown

Source:
Parameters:
Name Type Description
numRows Number

Number of rows in current set of data

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

TagDataTable 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:
Source:
Returns:

class

Type
Class

Extends

  • Component

Members

(inner) handleCellClick

Handle click on table cell

Source:

(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

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

query object

GraphQL query object

selectedRows Array

provides selected rows in the table

transform function

transform of collection for grid results

Type:
  • propTypes

(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(numRows) → {node}

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

Source:
Parameters:
Name Type Description
numRows Number

Number of rows in current set of data

Returns:

returns a JSX node or empty string

Type
node

(inner) filterData(data) → {Object}

Filter supplied data if needed, or spit out raw if no filter

Source:
Parameters:
Name Type Description
data Array

An array of objects

Returns:

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

Type
Object

(inner) handleBulkActionsSelect(action) → {undefined}

Handle bulk action select

Source:
Parameters:
Name Type Description
action String

Bulk action name

Returns:

No return value

Type
undefined

(inner) handleToggleAll() → {undefined}

Toggle selection state for all rows

Source:
Returns:

No return value

Type
undefined

(inner) handleToggleSelection(key, shift, row) → {undefined}

Return selected state for a given row key

Source:
Parameters:
Name Type Description
key String

Row key field value

shift Boolean

Shift key was pressed

row Object

Row data

Returns:

No return value

Type
undefined

(inner) isRowSelected(key) → {Boolean}

Return selected state for a given row key

Source:
Parameters:
Name Type Description
key String

Row key field value

Returns:

A boolean value for the selected state of the row

Type
Boolean

(inner) renderBulkActionsSelect() → {Node}

Renders the bulk action select component

Source:
Returns:

React node

Type
Node

(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) renderTableFilter(numRows) → {node}

Uses props to determine if a Table Filter should be shown

Source:
Parameters:
Name Type Description
numRows Number

Number of rows in current set of data

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