Class: TableEditorView

TableEditorView()

A view of an HTML textarea with markdown editor UI and preview tab

Constructor

new TableEditorView()

Source:

Extends

  • Backbone.View

Members

alertTemplate :Underscore.Template

The template for the alert message
Type:
  • Underscore.Template
Since:
  • 2.32.0
Source:

className :string

The HTML classes to use for this view's element
Type:
  • string
Source:

colCount :number

The current number of columns displayed in the spreadsheet, including the row number column
Type:
  • number
Source:

defaults :object

Default row & column count for empty tables
Type:
  • object
Source:

events :object

The events this view will listen to and the associated function to call.
Type:
  • object
Source:

rowCount :number

The current number of rows displayed in the spreadsheet, including the header row
Type:
  • number
Source:

sortingHistory :map

Map for storing the sorting history of every column
Type:
  • map
Source:

tableData :string

The same data shown in the table as a stringified JSON object.
Type:
  • string
Source:

template :Underscore.Template

References to templates for this view. HTML files are converted to Underscore.js templates
Type:
  • Underscore.Template
Source:

type :string

The type of View this is
Type:
  • string
Source:

Methods

addColumn(currentCol, direction)

Utility function to add columns
Parameters:
Name Type Description
currentCol number The column number at which to add a new column
direction string Can be "left" or "right", indicating whether to new column should be to the left or right of the current column
Source:

addRow(currentRow, direction)

Utility function to add row
Parameters:
Name Type Description
currentRow number The row number at which to add a new row
direction string Can be "top" or "bottom", indicating whether to new row should be above or below the current row
Source:

ascSort(currentCol, a, b) → {number}

Compare Functions for sorting - ascending
Parameters:
Name Type Description
currentCol number The number of the column to sort
a * One of two items to compare
b * The second of two items to compare
Source:
Returns:
A number indicating the order to place a vs b in the list. It it returns less than zero, then a will be placed before b in the list.
Type
number

closeDropdown(e)

Close the dropdown menu if the user clicks outside of it
Parameters:
Name Type Description
e type The event that triggered this function
Source:

createColDropdown(colNum) → {HTMLElement}

Create a dropdown menu for the header row
Parameters:
Name Type Description
colNum number The column number to add the dropdown to
Since:
  • 2.32.0
Source:
Returns:
The dropdown element
Type
HTMLElement

createHeaderRow() → {HTMLElement}

Create a header row for the table
Source:
Returns:
The header row element
Type
HTMLElement

createRowDropdown(rowNum) → {HTMLElement}

Create a dropdown menu for the row
Parameters:
Name Type Description
rowNum number The row number to add the dropdown to
Since:
  • 2.32.0
Source:
Returns:
The dropdown element
Type
HTMLElement

createSpreadsheet()

Creates or re-creates the table & headers with data, if there is any.
Source:

createTableBody(tableBody)

Given a table element, add table rows
Parameters:
Name Type Description
tableBody HTMLElement A table HTML Element
Source:

createTableBodyRow(rowNum, rowData) → {HTMLElement}

Create a row for the table
Parameters:
Name Type Description
rowNum number The table row number to add to the table, where 0 is the header row
rowData Array The data for the row
Source:
Returns:
The row element
Type
HTMLElement

deactivateEditing()

Turn off functionality that allows the user to edit the table values, add or remove rows or columns.
Source:

deleteColumn(currentCol)

Utility function to delete column
Parameters:
Name Type Description
currentCol number The number of the column to delete
Source:

deleteRow(currentRow)

Utility function to delete row
Parameters:
Name Type Description
currentRow number The row number to delete
Source:

dscSort(currentCol, a, b) → {number}

Descending compare function
Parameters:
Name Type Description
currentCol number The number of the column to sort
a * One of two items to compare
b * The second of two items to compare
Source:
Returns:
A number indicating the order to place a vs b in the list. It it returns less than zero, then a will be placed before b in the list.
Type
number

getData() → {Array}

Get the saved data and parse it. If there's no saved data, create it.
Source:
Returns:
The table data as an array of arrays
Type
Array

getJSONfromCSV(csv, addRowNumbers) → {Array}

Converts data to an array of arrays from a CSV
Parameters:
Name Type Description
csv string The table data as a CSV string
addRowNumbers boolean if true, adds a row number column to the left of the table
Since:
  • 2.32.0
Source:
Returns:
The table data as a CSV string
Type
Array

getJSONfromMarkdown(markdown) → {Array}

Converts a given markdown table string to JSON.
Parameters:
Name Type Description
markdown string description
Source:
Returns:
The markdown table as an array of arrays, where the header is the first array and each row is an array that follows.
Type
Array

getMarkdown() → {string}

Returns the table data as markdown
Source:
Returns:
The markdownified table as string
Type
string

handleBodyClick(e)

Called when the table body is clicked. Depending on what is clicked, shows or hides the dropdown menus in the body, or calls one of the functions listed in the menu (e.g. delete row).
Parameters:
Name Type Description
e type The event that triggered this function
Source:

handleHeadersClick(e)

Called when the table header is clicked. Depending on what is clicked, shows or hides the dropdown menus in the header, or calls one of the functions listed in the menu (e.g. delete column).
Parameters:
Name Type Description
e event The event that triggered this function
Source:

hasEmptyCol1(data) → {boolean}

Checks whether the first column is empty.
Parameters:
Name Type Description
data object The table data in the form of an array of arrays
Source:
Returns:
returns true if the first column is empty, false if at least one cell in the first column contains a value
Type
boolean

initializeData() → {Array}

Create some empty arrays to hold data
Source:
Returns:
An array of arrays, each of which is an empty array
Type
Array

populateTable()

Fill data in created table from saved data
Source:

render()

Source:

renderFromCSV(csv)

Show the table from a configured CSV file
Parameters:
Name Type Description
csv string The CSV string to render as a table
Since:
  • 2.32.0
Source:

renderFromMarkdown(markdown)

Show the table from a configured markdown string
Parameters:
Name Type Description
markdown string The markdown string to render as a table
Since:
  • 2.32.0
Source:

resetData(_e)

Clear the saved data and reset the table to the default number of rows & columns
Parameters:
Name Type Description
_e event the event that triggered this function
Source:

saveData(data)

Save the data as a string on the tableData property of the view
Parameters:
Name Type Description
data Array The table data as an array of arrays
Source:

showMessage(message, typeopt, showEmailopt, triggerErroropt)

Display an alert at the top of the table
Parameters:
Name Type Attributes Description
message string The message to display
type string <optional>
The class to apply to the alert
showEmail boolean <optional>
Whether to show the email address
triggerError boolean <optional>
Set to true to trigger an error event on the view with the message
Since:
  • 2.32.0
Source:

sortColumn(currentCol)

Utility function to sort columns
Parameters:
Name Type Description
currentCol number The column number of the column to delete
Source:

updateData(e)

When the user focuses out, presume they've changed the data, and updated the saved data.
Parameters:
Name Type Description
e event The focus out event that triggered this function
Source:

TableEditorView(options)

new TableEditorView(options)

Initialize is executed when a new tableEditor is created.
Parameters:
Name Type Description
options object A literal object with options to pass to the view
Properties
Name Type Attributes Description
markdown string <optional>
A markdown table to edit.
csv string <optional>
A CSV table to edit.
tableData string <optional>
The table data as a stringified JSON in the form of an array of arrays. Only used if markdown is not provided.
viewMode boolean <optional>
Set this to true to inactivate editing of the table.
Source:

Members

alertTemplate :Underscore.Template

The template for the alert message
Type:
  • Underscore.Template
Since:
  • 2.32.0
Source:

className :string

The HTML classes to use for this view's element
Type:
  • string
Source:

colCount :number

The current number of columns displayed in the spreadsheet, including the row number column
Type:
  • number
Source:

defaults :object

Default row & column count for empty tables
Type:
  • object
Source:

events :object

The events this view will listen to and the associated function to call.
Type:
  • object
Source:

rowCount :number

The current number of rows displayed in the spreadsheet, including the header row
Type:
  • number
Source:

sortingHistory :map

Map for storing the sorting history of every column
Type:
  • map
Source:

tableData :string

The same data shown in the table as a stringified JSON object.
Type:
  • string
Source:

template :Underscore.Template

References to templates for this view. HTML files are converted to Underscore.js templates
Type:
  • Underscore.Template
Source:

type :string

The type of View this is
Type:
  • string
Source:

Methods

addColumn(currentCol, direction)

Utility function to add columns
Parameters:
Name Type Description
currentCol number The column number at which to add a new column
direction string Can be "left" or "right", indicating whether to new column should be to the left or right of the current column
Source:

addRow(currentRow, direction)

Utility function to add row
Parameters:
Name Type Description
currentRow number The row number at which to add a new row
direction string Can be "top" or "bottom", indicating whether to new row should be above or below the current row
Source:

ascSort(currentCol, a, b) → {number}

Compare Functions for sorting - ascending
Parameters:
Name Type Description
currentCol number The number of the column to sort
a * One of two items to compare
b * The second of two items to compare
Source:
Returns:
A number indicating the order to place a vs b in the list. It it returns less than zero, then a will be placed before b in the list.
Type
number

closeDropdown(e)

Close the dropdown menu if the user clicks outside of it
Parameters:
Name Type Description
e type The event that triggered this function
Source:

createColDropdown(colNum) → {HTMLElement}

Create a dropdown menu for the header row
Parameters:
Name Type Description
colNum number The column number to add the dropdown to
Since:
  • 2.32.0
Source:
Returns:
The dropdown element
Type
HTMLElement

createHeaderRow() → {HTMLElement}

Create a header row for the table
Source:
Returns:
The header row element
Type
HTMLElement

createRowDropdown(rowNum) → {HTMLElement}

Create a dropdown menu for the row
Parameters:
Name Type Description
rowNum number The row number to add the dropdown to
Since:
  • 2.32.0
Source:
Returns:
The dropdown element
Type
HTMLElement

createSpreadsheet()

Creates or re-creates the table & headers with data, if there is any.
Source:

createTableBody(tableBody)

Given a table element, add table rows
Parameters:
Name Type Description
tableBody HTMLElement A table HTML Element
Source:

createTableBodyRow(rowNum, rowData) → {HTMLElement}

Create a row for the table
Parameters:
Name Type Description
rowNum number The table row number to add to the table, where 0 is the header row
rowData Array The data for the row
Source:
Returns:
The row element
Type
HTMLElement

deactivateEditing()

Turn off functionality that allows the user to edit the table values, add or remove rows or columns.
Source:

deleteColumn(currentCol)

Utility function to delete column
Parameters:
Name Type Description
currentCol number The number of the column to delete
Source:

deleteRow(currentRow)

Utility function to delete row
Parameters:
Name Type Description
currentRow number The row number to delete
Source:

dscSort(currentCol, a, b) → {number}

Descending compare function
Parameters:
Name Type Description
currentCol number The number of the column to sort
a * One of two items to compare
b * The second of two items to compare
Source:
Returns:
A number indicating the order to place a vs b in the list. It it returns less than zero, then a will be placed before b in the list.
Type
number

getData() → {Array}

Get the saved data and parse it. If there's no saved data, create it.
Source:
Returns:
The table data as an array of arrays
Type
Array

getJSONfromCSV(csv, addRowNumbers) → {Array}

Converts data to an array of arrays from a CSV
Parameters:
Name Type Description
csv string The table data as a CSV string
addRowNumbers boolean if true, adds a row number column to the left of the table
Since:
  • 2.32.0
Source:
Returns:
The table data as a CSV string
Type
Array

getJSONfromMarkdown(markdown) → {Array}

Converts a given markdown table string to JSON.
Parameters:
Name Type Description
markdown string description
Source:
Returns:
The markdown table as an array of arrays, where the header is the first array and each row is an array that follows.
Type
Array

getMarkdown() → {string}

Returns the table data as markdown
Source:
Returns:
The markdownified table as string
Type
string

handleBodyClick(e)

Called when the table body is clicked. Depending on what is clicked, shows or hides the dropdown menus in the body, or calls one of the functions listed in the menu (e.g. delete row).
Parameters:
Name Type Description
e type The event that triggered this function
Source:

handleHeadersClick(e)

Called when the table header is clicked. Depending on what is clicked, shows or hides the dropdown menus in the header, or calls one of the functions listed in the menu (e.g. delete column).
Parameters:
Name Type Description
e event The event that triggered this function
Source:

hasEmptyCol1(data) → {boolean}

Checks whether the first column is empty.
Parameters:
Name Type Description
data object The table data in the form of an array of arrays
Source:
Returns:
returns true if the first column is empty, false if at least one cell in the first column contains a value
Type
boolean

initializeData() → {Array}

Create some empty arrays to hold data
Source:
Returns:
An array of arrays, each of which is an empty array
Type
Array

populateTable()

Fill data in created table from saved data
Source:

render()

Source:

renderFromCSV(csv)

Show the table from a configured CSV file
Parameters:
Name Type Description
csv string The CSV string to render as a table
Since:
  • 2.32.0
Source:

renderFromMarkdown(markdown)

Show the table from a configured markdown string
Parameters:
Name Type Description
markdown string The markdown string to render as a table
Since:
  • 2.32.0
Source:

resetData(_e)

Clear the saved data and reset the table to the default number of rows & columns
Parameters:
Name Type Description
_e event the event that triggered this function
Source:

saveData(data)

Save the data as a string on the tableData property of the view
Parameters:
Name Type Description
data Array The table data as an array of arrays
Source:

showMessage(message, typeopt, showEmailopt, triggerErroropt)

Display an alert at the top of the table
Parameters:
Name Type Attributes Description
message string The message to display
type string <optional>
The class to apply to the alert
showEmail boolean <optional>
Whether to show the email address
triggerError boolean <optional>
Set to true to trigger an error event on the view with the message
Since:
  • 2.32.0
Source:

sortColumn(currentCol)

Utility function to sort columns
Parameters:
Name Type Description
currentCol number The column number of the column to delete
Source:

updateData(e)

When the user focuses out, presume they've changed the data, and updated the saved data.
Parameters:
Name Type Description
e event The focus out event that triggered this function
Source: