Table component

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

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

<script>
  insBaseTable.addEventListener('insPaginationChange', tablePaginationHandler);
  insBaseTable.addEventListener('insTableSearch', tableSearchHandler);
  insBaseTable.addEventListener('insTableSort', tableSortHandler);
  insBaseTable.addEventListener('insTableBulkAction', tableBulkActionHandler);
  insBaseTable.addEventListener('insTableRowAction', tableRowActionHandler);
</script>

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

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

<ins-table
  id="multipleTagsEl"
  without-search
  without-pagination>
</ins-table>

<style>
  #multipleTagsEl .ibt-tag.Active { background-color: #24be8d; color: #fff; }
  #multipleTagsEl .ibt-tag.Inactive { background-color: #ff0000; color: #fff; }
  #multipleTagsEl .ibt-tag { background-color: #d4d4d4; color: #636363; padding: 6px 10px; font-size: 11px; border-radius: 4px; line-height: 1; }
</style>

<script>
  var multipleTagsEl = document.getElementById('multipleTagsEl');

  multipleTagsEl.tableHeaders = [
    { label: 'Name', type: "string"},
    { label: 'Status', type: "select", hasTag: true, multipleTags: true, selectOptions: ['Active', 'Inactive'] }
  ];

  multipleTagsEl.tableData = [
    { "Name": "John Doe", "Status": ["Active", "Inactive"] },
    {  "Name": "Maria Clara", "Status": ["Inactive"] },
    {  "Name": "Juan Cruz", "Status": null }
  ];
</script>

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

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

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

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

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

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

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

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

<ins-table
  id="initialTableEl"
  heading="Table Initial Value"
  initial-search="John Doe">
</ins-table>

<script type="text/javascript">
  var initialTableEL = document.getElementById('initialTableEl');
  
  initialTableEL.totalCount = 1;
  initialTableEL.tableHeaders = [
    { label: "String", type: 'string' },
    { label: "Number", type: 'number' },
    { label: "Currency", type: 'currency' }
  ];

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

<ins-table
  id="timezoneOverlayTable"
  no-wrap
  heading="Timezone Overlays"
  without-search
  without-pagination>
</ins-table>

<script>
  var timezoneOverlayTable = document.getElementById('timezoneOverlayTable');
  
  timezoneOverlayTable.tableHeaders = [
    { label: 'Greenwich Mean Time (+0)', type: "date_time", timezone_overlay: { date_time_format: "DD/MM/YYYY HH:mm", instance_time: "UTC+0", instance_timezone: "+0000@Greenwich Mean Time: Dublin, Edinburgh, Lisbon, London" } },
    { label: 'Kuala Lumpur, Singapore (+8)', type: "date_time", timezone_overlay: { date_time_format: "MM-DD-YYYY h:mm A", instance_time: "UTC+8", instance_timezone: "+0800@Kuala Lumpur, Singapore" } },
    { label: 'Canberra, Melbourne, Sydney (+10)', type: "date_time", timezone_overlay: { date_time_format: "YYYY-MM-DD HH:mm:ss", instance_time: "UTC+10", instance_timezone: "+1000@Canberra, Melbourne, Sydney" } },
  ];

  timezoneOverlayTable.tableData = [
    { "Greenwich Mean Time (+0)": "31/01/2000 18:00", "Kuala Lumpur, Singapore (+8)": "01-31-2000 6:00 PM", "Canberra, Melbourne, Sydney (+10)": "2000-01-31 18:00:00" },
    { "Greenwich Mean Time (+0)": "12/12/2010 00:00", "Kuala Lumpur, Singapore (+8)": "12-12-2000 12:00 AM", "Canberra, Melbourne, Sydney (+10)": "2000-12-12 00:00:00" },
    { "Greenwich Mean Time (+0)": "08/11/2020 12:00", "Kuala Lumpur, Singapore (+8)": "11-08-2000 12:00 PM", "Canberra, Melbourne, Sydney (+10)": "2000-11-08 12:00:00" }
  ];
</script>