SortableTable

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

class

Type
Class
Source:

Extends

  • Component

Members

(inner) handleCellClick

Handle click on table cell

Source:

(inner) handleClick

Handle click on table row

Source:

(inner) handleClick()

Handle click on table row

Source:

(inner) handleFilterInput

Update state when filter is changed

Source:

(inner) handleFilterInput()

Update state when filter is changed

Source:

(inner) renderColumnFilter

Uses props to determine if Column Filters should be shown

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) 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) 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) 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) 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) 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) 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(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) 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

(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

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

class

Type
Class
Source:

Extends

  • Component

Members

(inner) handleCellClick

Handle click on table cell

Source:

(inner) handleClick

Handle click on table row

Source:

(inner) handleClick()

Handle click on table row

Source:

(inner) handleFilterInput

Update state when filter is changed

Source:

(inner) handleFilterInput()

Update state when filter is changed

Source:

(inner) renderColumnFilter

Uses props to determine if Column Filters should be shown

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) 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) 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) 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) 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) 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) 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(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) 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

(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