Class: ModernTable

ModernTable(tableContainerID, tableID, dataURL, optionsopt)

A simple ES6 class targeting modern browsers that dynamically creates a data table from a JSON source. Displays nicely within Bootstrap Card.

    NOTES:
  • Underscores (_) used to indicate private (local) methods that should not be used outside of the class.
  • tableFooter can affect the width of the first column.

Constructor

new ModernTable(tableContainerID, tableID, dataURL, optionsopt)

Parameters:
Name Type Attributes Description
tableContainerID string

The ID of the element that contains the table.
tableID string

The ID we want to assign to the table.
dataURL string

URL used to fetch JSON data to build table.
options Object <optional>

Optional configuration object.

Properties
Name Type Attributes Default Description
tableClasses string <optional>

Enter classes as a single string same as if entering in the class attribute.
tableCaption string <optional>

String for specifying table caption.
tableFooter string <optional>

String for specifying table footer.
enableSearch boolean <optional>
 true

boolean to enable using the search box.
searchClasses string <optional>

Classes to be used on the search element.
colConfig Object <optional>

Column configuration object. Key is column name.

Properties
Name Type Attributes Description
colName string <optional>

The name of the column in the model to set options for.

Properties
Name Type Attributes Default Description
format string <optional>

Column format: 'date-us', 'number-grouped', 'number-ungrouped', 'currency-us', 'percent'.
dateSource string <optional>

Date format of source data.
dateDisplay string <optional>

Format that the date should be displayed in.
numDecimals number <optional>
 0

Number of decimals to display.
alignment string <optional>

Cell alignment: left, center, and right.
Source:

Methods

(async, private) _buildTable()

Builds the table by fetching the data & rendering the table in the GUI.

Source:

(async, private) _buildTable()

Builds the table by fetching the data & rendering the table in the GUI.

Source:

(private) _cancelSearch(e)

Provides a method for canceling a search.

Parameters:
Name Type Description
e event
Source:

(private) _cancelSearch(e)

Provides a method for canceling a search.

Parameters:
Name Type Description
e event
Source:

(async, private) _fetchData(urlToBeFetched) → {Array.<Object>}

Fetches data and renders table if data was successfully fetched.

Parameters:
Name Type Description
urlToBeFetched string
Source:
Returns:

responseJSON

Type
Array.<Object>

(async, private) _fetchData(urlToBeFetched) → {Array.<Object>}

Fetches data and renders table if data was successfully fetched.

Parameters:
Name Type Description
urlToBeFetched string
Source:
Returns:

responseJSON

Type
Array.<Object>

(private) _filterTable(e, rows)

Loops through each cell in each row and checks if matches searchText.

Parameters:
Name Type Description
e event
rows array

rows collection of a table element
Source:

(private) _filterTable(e, rows)

Loops through each cell in each row and checks if matches searchText.

Parameters:
Name Type Description
e event
rows array

rows collection of a table element
Source:

(private) _formatCellValue(cellValue, configKey)

Formats table cells with number and/or date formatting.

Notes:

  • Recommended to use format-intl-number library or Moment.js for formatting.
  • However, other formatting libraries can be used if desired.
  • Gracefully fails to no number/date formatting if libraries are not loaded or the format option was not specified in the colConfig.

Parameters:
Name Type Description
cellValue *
configKey string
Source:
Returns:

cellValue

(private) _formatCellValue(cellValue, configKey)

Formats table cells with number and/or date formatting.

Notes:

  • Recommended to use format-intl-number library or Moment.js for formatting.
  • However, other formatting libraries can be used if desired.
  • Gracefully fails to no number/date formatting if libraries are not loaded or the format option was not specified in the colConfig.

Parameters:
Name Type Description
cellValue *
configKey string
Source:
Returns:

cellValue

(private) _renderTable(tableData)

Processes fetched data into an HTML table.

Parameters:
Name Type Description
tableData Array.<Object>
Source:

(private) _renderTable(tableData)

Processes fetched data into an HTML table.

Parameters:
Name Type Description
tableData Array.<Object>
Source:

(private) _renderTableBody(elementTable, tableData)

Process fetched data into a table body.

Parameters:
Name Type Description
elementTable string
tableData Object
Source:

(private) _renderTableBody(elementTable, tableData)

Process fetched data into a table body.

Parameters:
Name Type Description
elementTable string
tableData Object
Source:

(private) _renderTableHead(elementTable, tableData)

Creates table row from fetched data's keys.

Parameters:
Name Type Description
elementTable string
tableData Array.<Object>
Source:

(private) _renderTableHead(elementTable, tableData)

Creates table row from fetched data's keys.

Parameters:
Name Type Description
elementTable string
tableData Array.<Object>
Source:

(private) _renderTableSearch(elementTable)

Creates a search as you type search element.

Parameters:
Name Type Description
elementTable Object
Source:

(private) _renderTableSearch(elementTable)

Creates a search as you type search element.

Parameters:
Name Type Description
elementTable Object
Source:

(private) _setAlignment(configKey) → {string}

Sets the alignment for a column from the alignment colConfig.

Parameters:
Name Type Description
configKey string
Source:
Returns:

alignment

Type
string

(private) _setAlignment(configKey) → {string}

Sets the alignment for a column from the alignment colConfig.

Parameters:
Name Type Description
configKey string
Source:
Returns:

alignment

Type
string

(private) _setColTitle(configKey) → {string}

Sets the column title from colTitle configuration if explicitly set.

Parameters:
Name Type Description
configKey string
Source:
Returns:

colTitle

Type
string

(private) _setColTitle(configKey) → {string}

Sets the column title from colTitle configuration if explicitly set.

Parameters:
Name Type Description
configKey string
Source:
Returns:

colTitle

Type
string

ModernTable(tableContainerID, tableID, dataURL, optionsopt)

A simple ES6 class targeting modern browsers that dynamically creates a data table from a JSON source. Displays nicely within Bootstrap Card.

    NOTES:
  • Underscores (_) used to indicate private (local) methods that should not be used outside of the class.
  • tableFooter can affect the width of the first column.

Constructor

new ModernTable(tableContainerID, tableID, dataURL, optionsopt)

Parameters:
Name Type Attributes Description
tableContainerID string

The ID of the element that contains the table.
tableID string

The ID we want to assign to the table.
dataURL string

URL used to fetch JSON data to build table.
options Object <optional>

Optional configuration object.

Properties
Name Type Attributes Default Description
tableClasses string <optional>

Enter classes as a single string same as if entering in the class attribute.
tableCaption string <optional>

String for specifying table caption.
tableFooter string <optional>

String for specifying table footer.
enableSearch boolean <optional>
 true

boolean to enable using the search box.
searchClasses string <optional>

Classes to be used on the search element.
colConfig Object <optional>

Column configuration object. Key is column name.

Properties
Name Type Attributes Description
colName string <optional>

The name of the column in the model to set options for.

Properties
Name Type Attributes Default Description
format string <optional>

Column format: 'date-us', 'number-grouped', 'number-ungrouped', 'currency-us', 'percent'.
dateSource string <optional>

Date format of source data.
dateDisplay string <optional>

Format that the date should be displayed in.
numDecimals number <optional>
 0

Number of decimals to display.
alignment string <optional>

Cell alignment: left, center, and right.
Source:

Methods

(async, private) _buildTable()

Builds the table by fetching the data & rendering the table in the GUI.

Source:

(async, private) _buildTable()

Builds the table by fetching the data & rendering the table in the GUI.

Source:

(private) _cancelSearch(e)

Provides a method for canceling a search.

Parameters:
Name Type Description
e event
Source:

(private) _cancelSearch(e)

Provides a method for canceling a search.

Parameters:
Name Type Description
e event
Source:

(async, private) _fetchData(urlToBeFetched) → {Array.<Object>}

Fetches data and renders table if data was successfully fetched.

Parameters:
Name Type Description
urlToBeFetched string
Source:
Returns:

responseJSON

Type
Array.<Object>

(async, private) _fetchData(urlToBeFetched) → {Array.<Object>}

Fetches data and renders table if data was successfully fetched.

Parameters:
Name Type Description
urlToBeFetched string
Source:
Returns:

responseJSON

Type
Array.<Object>

(private) _filterTable(e, rows)

Loops through each cell in each row and checks if matches searchText.

Parameters:
Name Type Description
e event
rows array

rows collection of a table element
Source:

(private) _filterTable(e, rows)

Loops through each cell in each row and checks if matches searchText.

Parameters:
Name Type Description
e event
rows array

rows collection of a table element
Source:

(private) _formatCellValue(cellValue, configKey)

Formats table cells with number and/or date formatting.

Notes:

  • Recommended to use format-intl-number library or Moment.js for formatting.
  • However, other formatting libraries can be used if desired.
  • Gracefully fails to no number/date formatting if libraries are not loaded or the format option was not specified in the colConfig.

Parameters:
Name Type Description
cellValue *
configKey string
Source:
Returns:

cellValue

(private) _formatCellValue(cellValue, configKey)

Formats table cells with number and/or date formatting.

Notes:

  • Recommended to use format-intl-number library or Moment.js for formatting.
  • However, other formatting libraries can be used if desired.
  • Gracefully fails to no number/date formatting if libraries are not loaded or the format option was not specified in the colConfig.

Parameters:
Name Type Description
cellValue *
configKey string
Source:
Returns:

cellValue

(private) _renderTable(tableData)

Processes fetched data into an HTML table.

Parameters:
Name Type Description
tableData Array.<Object>
Source:

(private) _renderTable(tableData)

Processes fetched data into an HTML table.

Parameters:
Name Type Description
tableData Array.<Object>
Source:

(private) _renderTableBody(elementTable, tableData)

Process fetched data into a table body.

Parameters:
Name Type Description
elementTable string
tableData Object
Source:

(private) _renderTableBody(elementTable, tableData)

Process fetched data into a table body.

Parameters:
Name Type Description
elementTable string
tableData Object
Source:

(private) _renderTableHead(elementTable, tableData)

Creates table row from fetched data's keys.

Parameters:
Name Type Description
elementTable string
tableData Array.<Object>
Source:

(private) _renderTableHead(elementTable, tableData)

Creates table row from fetched data's keys.

Parameters:
Name Type Description
elementTable string
tableData Array.<Object>
Source:

(private) _renderTableSearch(elementTable)

Creates a search as you type search element.

Parameters:
Name Type Description
elementTable Object
Source:

(private) _renderTableSearch(elementTable)

Creates a search as you type search element.

Parameters:
Name Type Description
elementTable Object
Source:

(private) _setAlignment(configKey) → {string}

Sets the alignment for a column from the alignment colConfig.

Parameters:
Name Type Description
configKey string
Source:
Returns:

alignment

Type
string

(private) _setAlignment(configKey) → {string}

Sets the alignment for a column from the alignment colConfig.

Parameters:
Name Type Description
configKey string
Source:
Returns:

alignment

Type
string

(private) _setColTitle(configKey) → {string}

Sets the column title from colTitle configuration if explicitly set.

Parameters:
Name Type Description
configKey string
Source:
Returns:

colTitle

Type
string

(private) _setColTitle(configKey) → {string}

Sets the column title from colTitle configuration if explicitly set.

Parameters:
Name Type Description
configKey string
Source:
Returns:

colTitle

Type
string