• Change Log
  • FAQ Support
  • Change Log
  • FAQ Support
Insites Docs Web Components V2Data DisplayTable

Table

Published on February 18, 2021, updated on June 16, 2021

Element: <ins-table>

Defines a table.

Complete Example

Code Snippet

<ins-table
  id="insBaseTable"
  heading="Table"
  Search bar-placeholder="Search..."
  tooltip="This is a sample tooltip content. It also support html content.">
</ins-table>
Set Initial Properties

Code Snippet

<script>
  var insBaseTable = document.getElementById('insBaseTable');
  var rawData = [];
  var filteredData = [];
  var displayedData = [];
  var tableHeaders = [];
  var totalCount = 0;
  var pageNumber = 1;
  var pageSize = 10;
  var searchKeyword = '';
  var sortedKeyword = '';

  insBaseTable.loadingScreen = true;
  insBaseTable.bulkActions = ['Archive'];
  insBaseTable.rowActions = ['Archive'];
</script>
Add Event Listener

Code Snippet

<script>
  insBaseTable.addEventListener('onPaginationChange', tablePaginationHandler);
  insBaseTable.addEventListener('onTableSearch', tableSearchHandler);
  insBaseTable.addEventListener('onTableSort', tableSortHandler);
  insBaseTable.addEventListener('onTableBulkAction', tableBulkActionHandler);
  insBaseTable.addEventListener('onTableRowAction', tableRowActionHandler);
</script>
Table Pagination Handler

Code Snippet

<script>
function tablePaginationHandler(event){
  insBaseTable.loadingScreen = true;
  pageSize = event.detail.pageSize;
  pageNumber = event.detail.pageNumber;
  processTableData()
}
</script>
Table Search Handler

Code Snippet

<script>
function tableSearchHandler(event){
  insBaseTable.loadingScreen = true;
  searchKeyword = event.detail.value;

  if (!searchKeyword) {
    processTableData();
    return;
  }

  filteredData = [];
  rawData.forEach((value) => {
    Object.keys(value).forEach((key) => {
      if (key === 'Default Column'){
        var match = value[key];
        if (match.toLowerCase().includes(searchKeyword.toLowerCase())) {
          filteredData.push(value);
        }
      }
    });
  });

  if (sortedKeyword && filteredData.length > 1) {
    filteredData.sort(dynamicKeySort(sortedKeyword));
  }
  insBaseTable.pageNumber = 1;
  processTableData();

  if (!filteredData.length) {
    insBaseTable.loadingScreen = true;
    insBaseTable.loaderTitle = '';
    insBaseTable.loaderMessage = 'No result found for "' + searchKeyword + '"';
    insBaseTable.loaderIcon = '';
  }
}
</script>
Table Sort Handler

Code Snippet

<script>
function tableSortHandler(event){
  sortedKeyword = event.detail.order === 'asc' ? event.detail.keyword : `-${event.detail.keyword}`;
  if (searchKeyword){
    filteredData.sort(dynamicKeySort(sortedKeyword));
  } else {
    rawData.sort(dynamicKeySort(sortedKeyword));
  }
  processTableData();
}
</script>
Table Bulk Action Handler

Code Snippet

<script>
function tableBulkActionHandler(event){
  if (event.detail.action === 'Archive'){
    archiveSelection(event.detail.selections);
  }
}
</script>
Table Row Action Handler

Code Snippet

<script>
function tableRowActionHandler(event){
  if (event.detail.action === 'Archive'){
    archiveItem(event.detail.data);
  }
}
</script>
Process Table Data

Code Snippet

<script>
function processTableData(){
  var last_index = pageNumber * pageSize;
  var first_index = (last_index - pageSize) + 1;

  displayedData = [];

  if (searchKeyword) {

    filteredData.forEach((value, index) => {
      if (index >= first_index && index <= last_index) {
        displayedData.push(value);
      } else if (filteredData.length < pageSize){
        displayedData.push(value);
      }
    });
    insBaseTable.totalCount = filteredData.length;

  } else {

    rawData.forEach((value, index) => {
      if (index >= first_index && index <= last_index) {
        displayedData.push(value);
      }
    });
    insBaseTable.totalCount = rawData.length;

  }

  insBaseTable.tableData = displayedData;
  insBaseTable.loadingScreen = false;
}
</script>
Dynamic Key Sort

Code Snippet

<script>
function dynamicKeySort(key) {
  var OrderSortIndex = 1;

  if (key[0] === "-") {
    OrderSortIndex = -1;
    key = key.substr(1);
  }

  return function (a, b) {
    var num = (a[key] < b[key]) ? -1 : (a[key] > b[key]) ? 1 : 0;
    return num * OrderSortIndex;
  }
}
</script>
InsBaseTableHeader Demo

Code Snippet

<script>
window.addEventListener('load', () => {
  var table = document.getElementById('insBaseTableHeaders');

  table.totalCount = 1;
  table.tableHeaders = [
    { label: "String", type: 'string' },
    { label: "Number", type: 'number' },
    { label: "Currency", type: 'currency' }
  ];

  table.tableData = [
    { id: 1, "String": "John Doe", "Number":  100, "Currency": 99.99 }
  ]
});
</script>
Editable Table

 
Setting the table header attribute editable to true, you can change the functionality of your table row action to be "edit row data".
 
Use the event "onTableBulkAction" to catch the event details.
 

Code Snippet

<ins-table 
  id="fieldTable" 
  default-bulk-action="Update" 
  without-pagination 
  without-search>
</ins-table>

<style>
  // CSS for table tags
  #fieldTable .tagged.Active span { background-color: #24be8d; color: #fff; }
  #fieldTable .tagged span { background-color: #d4d4d4; color: #636363; padding: 6px 10px; font-size: 11px; border-radius: 4px; }
</style>

<script>
  var fieldTable = document.getElementById('fieldTable');
  var dateFormat = "MM/DD/YYYY"

  // set table bulk actions
  fieldTable.bulkActions = ["Update"];

  // set table headers
  fieldTable.tableHeaders = [
    { label: 'Name', type: "string", editable: true },
    { label: 'Birthday', type: "date", editable: true },
    { label: 'Status', type: "select", hasTag: true, editable: true,
        selectOptions: ['Active', 'Inactive'] }
  ];

  // set table data
  fieldTable.tableData = [
    { "id": "sample-001", "Name": "John Doe", "Birthday": "01/02/1990", "Status": "Active" },
    { "id": "sample-002", "Name": "Derek de Guzman", "Birthday": "11/29/1990", "Status": "Inactive" }
  ];

  // add table event listener
  fieldTable.addEventListener('onTableBulkAction', function(event) {
    console.log('Edit table event', event.detail);
    alert("Check console log for event data");
  });
</script>

 

Static Table

 
Using the attribute static-table, you can manually construct your table rows and columns and apply your own HTML layout & styling
 
To do this, you can nest these sub-components:
 

Insites Base Table Row <ins-table-row>

 
Defines a table <tr> element
 

Insites Base Table Header <ins-table-th>

 
Defines a table <tr> element
 

Insites Base Table Data / Column <ins-table-td>

 
Defines a table <td> element
 

Sample Static Table
Table Header 1 Table Header 2 Row 1 Table Data 1 Row 1 Table Data 2 Row 2 Table Data 1 Row 2 Table Data 2

Code Snippet

<ins-table 
  static-table 
  without-pagination>

  <ins-table-row>

    <ins-table-th>
      Table Header 1
    </ins-table-th>

    <ins-table-th>
      Table Header 2
    </ins-table-th>

  </ins-table-row>

  <ins-table-row>

    <ins-table-td>
      Row 1 Table Data 1
    </ins-table-td>

    <ins-table-td>
      Row 1 Table Data 2
    </ins-table-td>

  </ins-table-row>

  <ins-table-row>
 
   <ins-table-td>
      Row 2 Table Data 1
    </ins-table-td>

    <ins-table-td>
      Row 2 Table Data 2
    </ins-table-td>
 
 </ins-table-row>

</ins-table>

 

Attributes

 

FIELD ATTRIBUTE TYPE DEFAULT OPTIONS DESCRIPTION
no-wrap boolean false true, false Removes the table borders and shadow styling
search-position string false true, false Changes search field position
without-search boolean false true, false Removes search input field
without-pagination boolean false true, false Removes table pagination display
static-table boolean false true, false Enables table accept static data
loading-screen boolean false true, false Enables loader in table
loader-title string "" any Defines title of loader
loader-message string "" any Defines message of loader
loader-icon string "" processing, warning, help, error, success, downloading, uploading Defines icon of loader
search bar-placeholder string "" any Defines the short hint that describes the expected value in the input field
heading string "" any Defines header of table
currency string "" any Defines currency in table
table-headers Array of InsBaseTableHeader [] any Defines header of data columns in table
table-data Array [] any Defines data in table (Property keys should match the column header)
empty-value string "-" any String displayed when value is empty
page-number number 1 any Defines number of pages in table
page-size number 10 any Defines size of pages in table
page-size-options number [10, 20, 50] any Defines size options of pages in table
total-count any 0 any Defines total count value
bulk-actions any [] any Define options of Bulk actions dropdown
row-actions any [] any Define options of rows actions
selected-rows any [] any Define options of selected rows
empty-value string "-" any Defines the value displayed when a column has no value
sort-order boolean false true, false Defines the default sorting by order of the header arrow
sort-keyword string "" any Defines the default table header sorted by
text-overflow string "" ellipsis Set the table text-overflow to 'ellipsis'
default-bulk-action string "" [any value set on bulk-actions] Defines the pre-selected bulk action

 

Table Header Data Attributes

 

ATTRIBUTE TYPE DEFAULT OPTIONS DESCRIPTION
label string "" any Text label for column header
sortable boolean false true, false Allow column to be sortable
has-tag boolean false true, false Change styling of the column content to be 'tags'. Column value is appended as class value to the column which can be used for styling
has-link boolean false true, false Change styling of the column to have link styling
has-column-action boolean false true, false Shows table row actions on the column. By default, 1st column will always show row actions (if table row actions are available)
has-image boolean false true, false Marks the column to have an image besides the value   - To set image value, data should be as ["column name"_Img]   (ie. Header Label = ['Customer Name'] then Image = ['Customer Name_Img']
type string "string" string, select, number, currency, date Defines the column data type. "Number & Currency" will make the text right aligned.
editable boolean false true, false Makes the table row field values editable. (table needs to have 'bulk-actions')   Supported field types:     * string (default)   * select   * date
select-options array [] any Defines the options for 'select' field type (on editable only)
date-format string "YYYY-MM-DD" any valid date format Defines field date format (on editable only)

 

Events

 

EVENT OBJECT DESCRIPTION
insPaginationChange pageSize, pageNumber Execute a script when pagination is clicked
insTableSearch value Execute a script when an element gets user search input
insTableSort keyword, order Execute a script when table is sorted
insTableBulkAction action,selections,updated_items (for editable table) Execute a script when bulk action button is clicked
insTableRowAction action,header,data (table row data) Execute a script when row action button is clicked
insFieldChange value (for editable table) Execute a script when row field value has changed

 

Have a suggestion for this page?

Send your suggestions using this form.