Table
Usage
Data tables present information in a grid of rows and columns, structuring it in a manner that's simple to scan. This allows users to quickly identify patterns and gain insights from the data. The Table component is designed to present data in a structured grid format, utilizing rows and columns to organize information effectively. The Table component is versatile and can be customized to suit various use cases, providing a robust solution for data presentation and interaction.
Examples
1. Bordered
2. Stripped
html
<input type="text" id="search" placeholder="Search Term" style="width: 300px;">
<x-table id="myTable"></x-table>
<x-table id="myTable-1"></x-table>The table can be populated using the attributes: options, search-options, loading which is either "true" or "false"
js
const search = document.getElementById("search")
const table = document.querySelector("#myTable")
table.setAttribute("options", JSON.stringify(tableOptions))
table.addEventListener("xTableCustomView", ({ detail }) => {
window.alert(JSON.stringify(detail))
})
search.addEventListener("input", () => {
table.setAttribute("search-options", JSON.stringify({
searchKey: search.value,
fields: [],
}))
})
// Second table
const table1 = document.querySelector("#myTable-1")
table1.setAttribute("options", JSON.stringify(tableOptions1))
table1.addEventListener("xTableCustomView", ({ detail }) => {
window.alert(JSON.stringify(detail))
})Table Options
js
// Table configuration
const tableOptions = {
type: "bordered",
columns: [
{ field: "id", header: "ID", type: "checkbox", width: "100px" },
{ field: "id", header: "ID", sortable: true },
{ field: "name", header: "Name", sortable: true },
{ field: "", header: "Status", type: "raw", data: `
<span class="pill {$ROW['status'] === 'ACTIVE' ? '' : 'd-none'}">Status</span>
<span class="pill {$ROW['status'] === 'NONACTIVE' ? 'error' : 'd-none'}">Status</span>
` },
{ field: "age", header: "Age", sortable: true },
{ field: "", header: "Action", type: "raw", data: `
<div class="flex gap-4">
<span class="u-icon u-icon-24 text-primary-normal pointer" data-event="xTableCustomView">o-eye</span>
<span class="u-icon u-icon-24 pointer" data-event="xTableCustomEdit">o-pencil-edit</span>
<span class="u-icon u-icon-24 pointer" data-event="xTableCustomDelete">o-bin</span>
</div>
` },
],
rows: [
{ id: 1, name: "John", age: 30, status: "ACTIVE" },
{ id: 2, name: "Jane", age: 25, status: "NONACTIVE" },
{ id: 3, name: "Adon", age: 69, status: "NONACTIVE" },
{ id: 4, name: "Bobby", age: 18, status: "NONACTIVE" },
{ id: 5, name: "Zena", age: 6, status: "ACTIVE" },
{ id: 6, name: "Frank", age: 17, status: "ACTIVE" },
{ id: 7, name: "Alice", age: 42, status: "ACTIVE" },
{ id: 8, name: "Greg", age: 27, status: "NONACTIVE" },
{ id: 9, name: "Hannah", age: 55, status: "ACTIVE" },
{ id: 10, name: "Tim", age: 22, status: "NONACTIVE" },
{ id: 11, name: "Laura", age: 33, status: "ACTIVE" },
{ id: 12, name: "Sam", age: 45, status: "NONACTIVE" },
{ id: 13, name: "Erica", age: 31, status: "ACTIVE" },
{ id: 14, name: "Mike", age: 20, status: "ACTIVE" },
{ id: 15, name: "Nancy", age: 37, status: "NONACTIVE" },
{ id: 16, name: "Jacob", age: 40, status: "ACTIVE" },
{ id: 17, name: "Olivia", age: 28, status: "NONACTIVE" },
{ id: 18, name: "Oscar", age: 21, status: "ACTIVE" },
{ id: 19, name: "Sophia", age: 48, status: "ACTIVE" },
{ id: 20, name: "Leo", age: 29, status: "NONACTIVE" },
{ id: 21, name: "Amelia", age: 35, status: "ACTIVE" },
{ id: 22, name: "Chris", age: 26, status: "NONACTIVE" },
{ id: 23, name: "Eve", age: 53, status: "ACTIVE" },
{ id: 24, name: "Kyle", age: 32, status: "NONACTIVE" },
{ id: 25, name: "Sasha", age: 39, status: "ACTIVE" },
{ id: 26, name: "Tom", age: 19, status: "NONACTIVE" },
{ id: 27, name: "Lily", age: 44, status: "ACTIVE" },
{ id: 28, name: "Ryan", age: 24, status: "NONACTIVE" },
{ id: 29, name: "Angela", age: 61, status: "ACTIVE" },
{ id: 30, name: "Mark", age: 38, status: "ACTIVE" },
{ id: 31, name: "Tina", age: 52, status: "NONACTIVE" },
{ id: 32, name: "Phil", age: 50, status: "ACTIVE" },
{ id: 33, name: "Isla", age: 23, status: "NONACTIVE" },
{ id: 34, name: "Ben", age: 41, status: "ACTIVE" },
{ id: 35, name: "Ruby", age: 30, status: "ACTIVE" },
{ id: 36, name: "Will", age: 18, status: "NONACTIVE" },
{ id: 37, name: "Judy", age: 58, status: "ACTIVE" },
{ id: 38, name: "Ethan", age: 27, status: "NONACTIVE" },
{ id: 39, name: "Mila", age: 46, status: "ACTIVE" },
{ id: 40, name: "Henry", age: 20, status: "ACTIVE" }
],
pagination: {
paginationType: "client",
numberPerPage: 10,
position: "left",
totalDataSize: 200,
numberPerPageOptions: [10, 20, 50, 100]
}
};| Attribute | Type | Default | Description |
|---|---|---|---|
type | string | "bordered" | Specifies the styling of the table (e.g., bordered, stripped). |
columns | array | [] | An array of column definitions, each containing field, header, and additional options. |
rows | array | [] | An array of objects representing the data to be displayed in the table. Each object corresponds to a row. |
pagination | object | {} | An object containing pagination settings such as type, number of items per page, and total data size. |
Columns
The columns attribute is an array where each object defines a column in the table. Here are the key properties:
| Attribute | Type | Default | Description |
|---|---|---|---|
field | string | "" | The data field corresponding to the column. |
header | string | "" | The text displayed as the column header. |
type | string | "default" | The type of the column (e.g., checkbox, raw). |
width | string | "" | The width of the column (e.g., "100px"). |
sortable | boolean | false | Indicates if the column is sortable. |
Pagination
The pagination attribute allows you to define how pagination is handled in the table:
| Attribute | Type | Default | Description |
|---|---|---|---|
paginationType | string | "client" | Specifies the type of pagination (e.g., client, server). |
numberPerPage | number | 10 | The default number of rows displayed per page. |
position | string | "left" | The position of pagination controls. |
totalDataSize | number | 0 | The total number of entries in the data source. |
numberPerPageOptions | array | [10, 20, 50, 100] | An array of options for selecting the number of rows per page. |
Search Options
javascript
const searchOptions = {
searchKey: "",
fields: [],
};The searchOptions object defines the configuration for handling search functionality within the application. Below are the available attributes and their descriptions.
| Attribute | Type | Default | Description |
|---|---|---|---|
searchKey | string | "" | Specifies the key or query term that is used to perform the search. Typically bound to a search input field. |
fields | array | [] | An array of fields that the search function will filter by. Each field in this array should correspond to a data attribute on which the search is applied. |
Table Event
The table component emits several custom events to handle user interactions, table changes, pagination, and selection actions. Below are the events and their descriptions.
| Event Name | Payload | Description |
|---|---|---|
xTableReady | null | Emitted when the table is visible in the DOM |
xTableChange | { paginationData: { currentPage, from, to, size } } | Emitted whenever there is a change in the table’s structure or data. The payload contains the pagination data with details as follows: - currentPage: The current page number - from: Starting index of items on the current page - to: Ending index of items on the current page - size: Number of items per page. |
xTablePrevious | { currentPage, from, to, size } | Emitted when the user navigates to the previous page. The payload includes pagination data with: - currentPage: Current page number - from: Starting index of items on the page - to: Ending index of items on the page - size: Number of items per page. |
xTableNext | { currentPage, from, to, size } | Emitted when the user navigates to the next page. The payload includes pagination data with the same structure as xTablePrevious. |
xTableSelection | Array | Emitted when items are selected in the table. Contains selectedItems, an array of the currently selected items. |
xTableCustom* | Object | Emitted when an action is triggered on specific table elements marked with data-event="xTableCustom[EventName]". Each custom event sends data for the specific row clicked, based on the unique identifier _x_table_uid. Replace [EventName] with specific event names (e.g., xTableCustomView, xTableCustomEdit, xTableCustomDelete). |
Usage Example
javascript
document.addEventListener("xTableNext", ({ detail }) => {
window.alert(JSON.stringify(detail)) // { currentPage, from, to, size }
})
document.addEventListener("xTableChange", ({ detail }) => {
window.alert(JSON.stringify(detail)) // { paginationData: { currentPage, from, to, size } }
})Rendered
html
<div class="data-table bordered has-checkbox">
<table>
<thead>
<tr>
<th style="width: 100px">
<label class="checkbox">
<input type="checkbox" master="" aria-label="Checkbox">
<span class="checkmark"></span>
</label>
</th>
<th>ID <span class="u-icon text-primary-normal"></span></th>
<th>Name <span class="u-icon text-primary-normal"></span></th>
<th>Status</th>
<th>Age <span class="u-icon text-primary-normal"></span></th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td><label class="checkbox"><input type="checkbox" slave="" aria-label="Checkbox" data-checked="1"><span
class="checkmark"></span></label></td>
<td>1</td>
<td>John</td>
<td><span class="pill">Status</span></td>
<td>30</td>
<td>
<div class="flex gap-4">
<span class="u-icon u-icon-24 text-primary-normal pointer">o-eye</span>
<span class="u-icon u-icon-24 pointer">o-pencil-edit</span>
<span class="u-icon u-icon-24 pointer">o-bin</span>
</div>
</td>
</tr>
<tr>
<td><label class="checkbox"><input type="checkbox" slave="" aria-label="Checkbox" data-checked="2"><span
class="checkmark"></span></label></td>
<td>2</td>
<td>Jane</td>
<td><span class="pill error">Status</span></td>
<td>25</td>
<td>
<div class="flex gap-4">
<span class="u-icon u-icon-24 text-primary-normal pointer">o-eye</span>
<span class="u-icon u-icon-24 pointer">o-pencil-edit</span>
<span class="u-icon u-icon-24 pointer">o-bin</span>
</div>
</td>
</tr>
<tr>
<td><label class="checkbox"><input type="checkbox" slave="" aria-label="Checkbox" data-checked="3"><span
class="checkmark"></span></label></td>
<td>3</td>
<td>Adon</td>
<td><span class="pill error">Status</span></td>
<td>69</td>
<td>
<div class="flex gap-4"><span class="u-icon u-icon-24 text-primary-normal pointer">o-eye</span><span
class="u-icon u-icon-24 pointer">o-pencil-edit</span><span
class="u-icon u-icon-24 pointer">o-bin</span></div>
</td>
</tr>
<tr>
<td><label class="checkbox"><input type="checkbox" slave="" aria-label="Checkbox" data-checked="4"><span
class="checkmark"></span></label></td>
<td>4</td>
<td>Bobby</td>
<td><span class="pill error">Status</span></td>
<td>18</td>
<td>
<div class="flex gap-4"><span class="u-icon u-icon-24 text-primary-normal pointer">o-eye</span><span
class="u-icon u-icon-24 pointer">o-pencil-edit</span><span
class="u-icon u-icon-24 pointer">o-bin</span></div>
</td>
</tr>
<tr>
<td><label class="checkbox"><input type="checkbox" slave="" aria-label="Checkbox" data-checked="5"><span
class="checkmark"></span></label></td>
<td>5</td>
<td>Zena</td>
<td><span class="pill">Status</span></td>
<td>6</td>
<td>
<div class="flex gap-4"><span class="u-icon u-icon-24 text-primary-normal pointer">o-eye</span><span
class="u-icon u-icon-24 pointer">o-pencil-edit</span><span
class="u-icon u-icon-24 pointer">o-bin</span></div>
</td>
</tr>
<tr>
<td><label class="checkbox"><input type="checkbox" slave="" aria-label="Checkbox" data-checked="6"><span
class="checkmark"></span></label></td>
<td>6</td>
<td>Frank</td>
<td><span class="pill">Status</span></td>
<td>17</td>
<td>
<div class="flex gap-4"><span class="u-icon u-icon-24 text-primary-normal pointer">o-eye</span><span
class="u-icon u-icon-24 pointer">o-pencil-edit</span><span
class="u-icon u-icon-24 pointer">o-bin</span></div>
</td>
</tr>
<tr>
<td><label class="checkbox"><input type="checkbox" slave="" aria-label="Checkbox" data-checked="7"><span
class="checkmark"></span></label></td>
<td>7</td>
<td>Alice</td>
<td><span class="pill">Status</span></td>
<td>42</td>
<td>
<div class="flex gap-4"><span class="u-icon u-icon-24 text-primary-normal pointer">o-eye</span><span
class="u-icon u-icon-24 pointer">o-pencil-edit</span><span
class="u-icon u-icon-24 pointer">o-bin</span></div>
</td>
</tr>
<tr>
<td><label class="checkbox"><input type="checkbox" slave="" aria-label="Checkbox" data-checked="8"><span
class="checkmark"></span></label></td>
<td>8</td>
<td>Greg</td>
<td><span class="pill error">Status</span></td>
<td>27</td>
<td>
<div class="flex gap-4"><span class="u-icon u-icon-24 text-primary-normal pointer">o-eye</span><span
class="u-icon u-icon-24 pointer">o-pencil-edit</span><span
class="u-icon u-icon-24 pointer">o-bin</span></div>
</td>
</tr>
<tr>
<td><label class="checkbox"><input type="checkbox" slave="" aria-label="Checkbox" data-checked="9"><span
class="checkmark"></span></label></td>
<td>9</td>
<td>Hannah</td>
<td><span class="pill">Status</span></td>
<td>55</td>
<td>
<div class="flex gap-4"><span class="u-icon u-icon-24 text-primary-normal pointer">o-eye</span><span
class="u-icon u-icon-24 pointer">o-pencil-edit</span><span
class="u-icon u-icon-24 pointer">o-bin</span></div>
</td>
</tr>
<tr>
<td><label class="checkbox"><input type="checkbox" slave="" aria-label="Checkbox"
data-checked="10"><span class="checkmark"></span></label></td>
<td>10</td>
<td>Tim</td>
<td><span class="pill error">Status</span></td>
<td>22</td>
<td>
<div class="flex gap-4"><span class="u-icon u-icon-24 text-primary-normal pointer">o-eye</span><span
class="u-icon u-icon-24 pointer">o-pencil-edit</span><span
class="u-icon u-icon-24 pointer">o-bin</span></div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="6">
<div class="table-footer left">
<div class="row-per-page">
<span>Rows Per Page</span>
<div style="width: 80px; height: 40px">
<div class="dropdown">
<input type="text" readonly data-icon="null" data-icon-color="#707070"
placeholder="" value="10" required style="height: 40px">
<span class="dropdown-indicator">
<span class="u-icon down"></span>
<span class="u-icon up" style="display: none"></span>
</span>
<div class="dropdown-content" style="display: none; width: 100%">
<ul>
<li tabindex="0">10</li>
<li tabindex="0">20</li>
<li tabindex="0">50</li>
<li tabindex="0">100</li>
</ul>
</div>
</div>
<select name="row-per-page" id="row-per-page"
style="opacity: 0; height: 0; padding: 0; width: 0;">
<option value=""></option>
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</div>
</div>
<div class="pagination">
<a href="#" class="disabled" prev-pager="">
<span class="u-icon u-icon-16">o-chevron-left</span>
</a>
<div class="pages">
<a class="page no-link active" pager="1">1</a>
<a class="page no-link" pager="2">2</a>
<a class="page no-link" pager="3">3</a>
<a class="page no-link " pager="4">4</a>
</div>
<a href="#" class="" next-pager="">
<span class="u-icon u-icon-16">o-chevron-right</span>
</a>
</div>
</div>
</td>
</tr>
</tfoot>
</table>
</div>Customisation
css
.data-table > table {
--table-inner-padding-inline: 1rem;
--table-inner-padding-block: 1rem;
--table-header-text-color: var(--grey-dark);
--table-body-text-color: var(--grey-normal);
--table-default-background-color: #fff;
--table-header-background-color: var(--grey-light);
--table-stripped-background-color: var(--grey-light);
--table-dropdown-right-position: 10px;
--table-dropdown-z-index: 10000;
}