Element: <ins-table>
Defines a 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:
<ins-table-row>
Defines a table <tr>
element
<ins-table-th>
Defines a table <tr>
element
<ins-table-td>
Defines a table <td>
element
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>
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>
Code Snippet
<script> insBaseTable.addEventListener('insPaginationChange', tablePaginationHandler); insBaseTable.addEventListener('insTableSearch', tableSearchHandler); insBaseTable.addEventListener('insTableSort', tableSortHandler); insBaseTable.addEventListener('insTableBulkAction', tableBulkActionHandler); insBaseTable.addEventListener('insTableRowAction', tableRowActionHandler); </script>
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>
Code Snippet
<script> function tablePaginationHandler(event){ insBaseTable.loadingScreen = true; pageSize = event.detail.pageSize; pageNumber = event.detail.pageNumber; processTableData() } </script>
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>
Code Snippet
<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>
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>
Code Snippet
<script> function tableBulkActionHandler(event){ if (event.detail.action === 'Archive'){ archiveSelection(event.detail.selections); } } </script>
Code Snippet
<script> function tableRowActionHandler(event){ if (event.detail.action === 'Archive'){ archiveItem(event.detail.data); } } </script>
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>
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>
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>
Code Snippet
<ins-table id="insBaseTableHeaders" heading="Table Search" bar-placeholder="Search..." tooltip="This is a sample tooltip content. It also support html content."> </ins-table>
Code Snippet
<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>
To enable timezone overlay, tableHeaders
column type
must be date_time
You can customize the timezones in the overlay using date_format
.
Key | Options | Description |
---|---|---|
date_time_format |
YYYY-MM-DD HH:mm / MM-DD-YYYY H:mm A (see Date and Time Formats) |
Date and Time format |
instance_time |
any | Instance Time |
instance_timezone |
(see Timezones for overlay) | Instance Timezone |
Format | Output | Description |
---|---|---|
YY |
18 | Two-digit year |
YYYY |
2018 | Four-digit year |
M |
1-12 | The month, beginning at 1 |
MM |
01-12 | The month, 2-digits |
MMM |
Jan-Dec | The abbreviated month name |
MMMM |
January-December | The full month name |
D |
1-31 | The day of the month |
DD |
01-31 | The day of the month, 2-digits |
H |
0-23 | The hour |
HH |
00-23 | The hour, 2-digits |
h |
1-12 | The hour, 12-hour clock |
hh |
01-12 | The hour, 12-hour clock, 2-digits |
m |
0-59 | The minute |
mm |
00-59 | The minute, 2-digits |
s |
0-59 | The second |
ss |
00-59 | The second, 2-digits |
A |
AM PM | Meridiem |
a |
am pm | Meridiem |
Code Snippet
<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", date_format: { 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", date_format: { 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", date_format: { 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>
Value | Description |
---|---|
-1200@International Date Line West | (UTC-12:00) International Date Line West |
-1100@Midway Island, Samoa | (UTC-11:00) Midway Island, Samoa |
-1000@Hawaii | (UTC-10:00) Hawaii |
-0900@Alaska | (UTC-09:00) Alaska |
-0800@Pacific Time (US & Canada) | (UTC-08:00) Pacific Time (US & Canada) |
-0800@Tijuana, Baja California | (UTC-08:00) Tijuana, Baja California |
-0700@Arizona | (UTC-07:00) Arizona |
-0700@Chihuahua, La Paz, Mazatlan | (UTC-07:00) Chihuahua, La Paz, Mazatlan |
-0700@Mountain Time (US & Canada) | (UTC-07:00) Mountain Time (US & Canada) |
-0600@Central America | (UTC-06:00) Central America |
-0600@Central Time (US & Canada) | (UTC-06:00) Central Time (US & Canada) |
-0600@Guadalajara, Mexico City, Monterrey | (UTC-06:00) Guadalajara, Mexico City, Monterrey |
-0600@Saskatchewan | (UTC-06:00) Saskatchewan |
-0500@Bogota, Lima, Quito, Rio Branco | (UTC-05:00) Bogota, Lima, Quito, Rio Branco |
-0500@Eastern Time (US & Canada) | (UTC-05:00) Eastern Time (US & Canada) |
-0500@Indiana (East) | (UTC-05:00) Indiana (East) |
-0400@Atlantic Time (Canada) | (UTC-04:00) Atlantic Time (Canada) |
-0400@Caracas, La Paz | (UTC-04:00) Caracas, La Paz |
-0400@Manaus | (UTC-04:00) Manaus |
-0400@Santiago | (UTC-04:00) Santiago |
-0330@Newfoundland | (UTC-03:30) Newfoundland |
-0300@Brasilia | (UTC-03:00) Brasilia |
-0300@Buenos Aires, Georgetown | (UTC-03:00) Buenos Aires, Georgetown |
-0300@Greenland | (UTC-03:00) Greenland |
-0300@Montevideo | (UTC-03:00) Montevideo |
-0200@Mid-Atlantic | (UTC-02:00) Mid-Atlantic |
-0100@Cape Verde Is. | (UTC-01:00) Cape Verde Is. |
-0100@Azores | (UTC-01:00) Azores |
+0000@Casablanca, Monrovia, Reykjavik | (UTC+00:00) Casablanca, Monrovia, Reykjavik |
+0000@Greenwich Mean Time : Dublin, Edinburgh, Lisbon, London | (UTC+00:00) Greenwich Mean Time : Dublin, Edinburgh, Lisbon, London |
+0100@Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna | (UTC+01:00) Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna |
+0100@Belgrade, Bratislava, Budapest, Ljubljana, Prague | (UTC+01:00) Belgrade, Bratislava, Budapest, Ljubljana, Prague |
+0100@Brussels, Copenhagen, Madrid, Paris | (UTC+01:00) Brussels, Copenhagen, Madrid, Paris |
+0100@Sarajevo, Skopje, Warsaw, Zagreb | (UTC+01:00) Sarajevo, Skopje, Warsaw, Zagreb |
+0100@West Central Africa | (UTC+01:00) West Central Africa |
+0200@Amman | (UTC+02:00) Amman |
+0200@Athens, Bucharest, Istanbul | (UTC+02:00) Athens, Bucharest, Istanbul |
+0200@Beirut | (UTC+02:00) Beirut |
+0200@Cairo | (UTC+02:00) Cairo |
+0200@Harare, Pretoria | (UTC+02:00) Harare, Pretoria |
+0200@Helsinki, Kyiv, Riga, Sofia, Tallinn, Vilnius | (UTC+02:00) Helsinki, Kyiv, Riga, Sofia, Tallinn, Vilnius |
+0200@Jerusalem | (UTC+02:00) Jerusalem |
+0200@Minsk | (UTC+02:00) Minsk |
+0200@Windhoek | (UTC+02:00) Windhoek |
+0300@Kuwait, Riyadh, Baghdad | (UTC+03:00) Kuwait, Riyadh, Baghdad |
+0300@Moscow, St. Petersburg, Volgograd | (UTC+03:00) Moscow, St. Petersburg, Volgograd |
+0300@Nairobi | (UTC+03:00) Nairobi |
+0300@Tbilisi | (UTC+03:00) Tbilisi |
+0330@Tehran | (UTC+03:30) Tehran |
+0400@Abu Dhabi, Muscat | (UTC+04:00) Abu Dhabi, Muscat |
+0400@Baku | (UTC+04:00) Baku |
+0400@Yerevan | (UTC+04:00) Yerevan |
+0430@Kabul | (UTC+04:30) Kabul |
+0500@Yekaterinburg | (UTC+05:00) Yekaterinburg |
+0500@Islamabad, Karachi, Tashkent | (UTC+05:00) Islamabad, Karachi, Tashkent |
+0530@Sri Jayawardenapura | (UTC+05:30) Sri Jayawardenapura |
+0530@Chennai, Kolkata, Mumbai, New Delhi | (UTC+05:30) Chennai, Kolkata, Mumbai, New Delhi |
+0545@Kathmandu | (UTC+05:45) Kathmandu |
+0600@Almaty, Novosibirsk | (UTC+06:00) Almaty, Novosibirsk |
+0600@Astana, Dhaka | (UTC+06:00) Astana, Dhaka |
+0630@Yangon (Rangoon) | (UTC+06:30) Yangon (Rangoon) |
+0700@Bangkok, Hanoi, Jakarta | (UTC+07:00) Bangkok, Hanoi, Jakarta |
+0700@Krasnoyarsk | (UTC+07:00) Krasnoyarsk |
+0800@Beijing, Chongqing, Hong Kong, Urumqi | (UTC+08:00) Beijing, Chongqing, Hong Kong, Urumqi |
+0800@Kuala Lumpur, Singapore | (UTC+08:00) Kuala Lumpur, Singapore |
+0800@Irkutsk, Ulaan Bataar | (UTC+08:00) Irkutsk, Ulaan Bataar |
+0800@Perth | (UTC+08:00) Perth |
+0800@Taipei | (UTC+08:00) Taipei |
+0900@Osaka, Sapporo, Tokyo | (UTC+09:00) Osaka, Sapporo, Tokyo |
+0900@Seoul | (UTC+09:00) Seoul |
+0900@Yakutsk | (UTC+09:00) Yakutsk |
+0930@Adelaide | (UTC+09:30) Adelaide |
+0930@Darwin | (UTC+09:30) Darwin |
+1000@Brisbane | (UTC+10:00) Brisbane |
+1000@Canberra, Melbourne, Sydney | (UTC+10:00) Canberra, Melbourne, Sydney |
+1000@Hobart | (UTC+10:00) Hobart |
+1000@Guam, Port Moresby | (UTC+10:00) Guam, Port Moresby |
+1000@Vladivostok | (UTC+10:00) Vladivostok |
+1100@Magadan, Solomon Is., New Caledonia | (UTC+11:00) Magadan, Solomon Is., New Caledonia |
+1200@Auckland, Wellington | (UTC+12:00) Auckland, Wellington |
+1200@Fiji, Kamchatka, Marshall Is. | (UTC+12:00) Fiji, Kamchatka, Marshall Is. |
+1300@Nuku'alofa | (UTC+13:00) Nuku'alofa |
FIELD ATTRIBUTE | TYPE | DEFAULT | OPTIONS | DESCRIPTION |
---|---|---|---|---|
search-position | string | right | right, left | Changes search field position |
without-search | boolean | false | true, false | Removes search input field |
search-bar-placeholder | string | "" | any | Defines the short hint that describes the expected value in the input field |
initial-search | string | "" | any | Sets default value of the table search input field |
FIELD ATTRIBUTE | TYPE | DEFAULT | OPTIONS | DESCRIPTION |
---|---|---|---|---|
without-pagination | boolean | false | true, false | Removes table pagination display |
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 |
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) |
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 |
Didn't quite find what you are looking for or have feedback on how we can make the content better then we would love to hear from you. Please provide us feedback and we will get back to you shortly.