@kubex/zinc 1.0.3 → 1.0.5

package/src/components/data-table/data-table.component.ts

@@ -19,20 +19,46 @@ import ZnHoverContainer from "../hover-container";
 import ZnMenu from "../menu";
 import ZnMenuItem from "../menu-item";
 import ZnSkeleton from "../skeleton";
+
+import type ZnDataSelect from "../data-select";
+import type ZnInput from "../input";
+import type ZnQueryBuilder from "../query-builder";
 import type ZnSelect from "../select";
 
 import styles from './data-table.scss';
 
 const DEFAULT_PAGE = 1;
 const DEFAULT_PER_PAGE = 10;
-const DEFAULT_TOTAL_PAGES = 10;
 
-interface TableData {
-  page: number;
-  per_page: number;
+interface Cell {
+  text: string;
+  column: string;
+  color?: string;
+  style?: string;
+  iconSrc?: string;
+  iconColor?: string;
+  hoverContent?: string;
+  hoverPlacement?: string;
+  chipColor?: string;
+  gaid?: string;
+  sortValue?: string;
+  uri?: string;
+  target?: string;
+}
+
+interface Row {
+  id: string;
+  uri?: string;
+  target?: string;
+  actions?: ActionConfig[];
+  cells: Cell[];
+}
+
+interface Response {
+  rows: Row[];
+  perPage: number;
   total: number;
-  total_pages: number;
-  data: any[];
+  page: number;
 }
 
 export enum ActionSlots {
@@ -40,101 +66,48 @@ export enum ActionSlots {
   modify = 'modify-action',
   create = 'create-action',
   filter = 'filter',
+  filter_top = 'filter-top',
   sort = 'sort',
+  inputs = 'inputs'
 }
 
-interface RowData {
-  [key: string]: string | number | object | undefined;
-}
-
-interface RenderDataValue {
-  value: string | number;
-  type: string;
-  tag: string;
-  url: string;
-  target: string;
-  gaid?: string;
-  html?: string;
-  color?: string;
-  caption: CaptionConfig;
-  buttons: ButtonConfig[];
-  menu: MenuConfig[];
-  icon: IconConfig;
-  hover: HoverContainerConfig;
-}
-
-interface CaptionConfig {
-  title: string;
-  summary: string;
+interface ActionConfig {
+  text: string;
   uri: string;
   target: string;
   gaid: string;
-  icon: IconConfig;
-}
-
-interface IconConfig {
-  src: string;
-  size: number;
-  color: string;
-}
-
-interface HoverContainerConfig {
-  label: string;
-  content: string;
-  anchor: string;
-  placement:
-    | 'top'
-    | 'top-start'
-    | 'top-end'
-    | 'bottom'
-    | 'bottom-start'
-    | 'bottom-end'
-    | 'right'
-    | 'right-start'
-    | 'right-end'
-    | 'left'
-    | 'left-start'
-    | 'left-end';
-  icon: IconConfig;
-}
-
-interface ButtonConfig {
-  id: string;
-  href: string;
-  gaid: string;
-  uri: string;
-  size: string;
-  color: string;
+  confirmType: string;
+  confirmTitle: string;
+  confirmContent: string;
   icon: string;
-  iconSize: string;
-  tooltip: string;
-  target: string;
-  label: string;
-  outline: boolean;
-  confirm: ConfirmConfig;
+  type: string;
 }
 
-interface MenuConfig {
-  id: string;
-  href: string;
-  gaid: string;
-  target: string;
+interface HeaderConfig {
+  key: string;
   label: string;
+  required?: boolean;
+  default?: boolean;
+  sortable?: boolean;
+  filterable?: boolean;
 }
 
-interface ConfirmConfig {
-  type: string;
-  trigger: string;
-  fid: string;
-  caption: string;
-  content: string;
-  action: string;
+interface DataRequest {
+  page: number;
+  perPage: number;
+  sortColumn: string;
+  sortDirection: string;
+  filter: string;
 }
 
-interface HeaderConfig {
-  title: string;
-  position: string;
-}
+type AllowedInputElement =
+  HTMLInputElement
+  | HTMLSelectElement
+  | HTMLTextAreaElement
+  | ZnInput
+  | ZnSelect
+  | ZnDataSelect
+  | ZnQueryBuilder
 
 /**
  * @summary Short summary of the component's intended use.
@@ -180,14 +153,11 @@ export default class ZnDataTable extends ZincElement {
   @property({attribute: 'data-uri'}) dataUri: string;
   @property({attribute: 'data', type: Object, reflect: true}) data: any;
   @property({attribute: 'sort-column'}) sortColumn: string;
-  @property({attribute: 'sort-direction'}) sortDirection: string;
+  @property({attribute: 'sort-direction'}) sortDirection: string = "asc";
   @property({attribute: 'filter'}) filter: string = '';
-
   @property({attribute: 'wide-column'}) wideColumn: string;
   @property({attribute: 'key'}) key: string = 'id';
-
-  @property({attribute: 'headers', type: Object})
-  headers: Record<string, string | HeaderConfig> = {};
+  @property({attribute: 'headers', type: Object}) headers: Record<string, HeaderConfig> = {};
 
   // Hide header text keeping the content - e.g. Action buttons without a header
   @property({attribute: 'hide-headers', type: Object}) hiddenHeaders = '{}';
@@ -208,10 +178,19 @@ export default class ZnDataTable extends ZincElement {
 
   @property() caption: string;
 
+  @property({attribute: "empty-state-caption"}) emptyStateCaption: string;
+
+  @property({attribute: "empty-state-icon"}) emptyStateIcon: string = "data_alert";
+
   // Hide the checkbox column
   @property({attribute: 'hide-checkboxes', type: Boolean}) hideCheckboxes: boolean;
+
   @property() filters: [] = [];
 
+  @property() method: 'GET' | 'POST' = 'POST';
+
+  @property({attribute: "no-initial-load", type: Boolean}) noInitialLoad: boolean = false;
+
   // Data Table Properties
   private _initialLoad = true;
   private _lastTableContent: TemplateResult = html``;
@@ -223,7 +202,6 @@ export default class ZnDataTable extends ZincElement {
   private totalPages: number;
 
   private _rows: any[] = [];
-  private _filteredRows: any[] = [];
 
   private numberOfRowsSelected: number = 0;
   private selectedRows: any[] = [];
@@ -237,94 +215,123 @@ export default class ZnDataTable extends ZincElement {
     ActionSlots.modify.valueOf(),
     ActionSlots.create.valueOf(),
     ActionSlots.filter.valueOf(),
-    ActionSlots.sort.valueOf()
+    ActionSlots.sort.valueOf(),
+    ActionSlots.inputs.valueOf()
   );
 
   private _dataTask = new Task(this, {
-    task: async ([dataUri], {signal}) => {
-      let url = dataUri;
-
-      const params = new URLSearchParams();
-      params.append('page', this.page.toString());
-      params.append('per_page', this.itemsPerPage.toString());
-      if (this.sortColumn) {
-        params.append('sort_column', this.sortColumn);
-      }
-      if (this.sortDirection) {
-        params.append('sort_direction', this.sortDirection);
+    task: async ([dataUri, requestParams], {signal}) => {
+      if (dataUri === undefined || this.noInitialLoad && this._initialLoad) {
+        return {rows: [], page: 1, perPage: this.itemsPerPage, total: 0};
       }
-      if (this.filter) {
-        params.append('filter', this.filter);
-      }
-      url += '?' + params.toString();
-
-      if (!this.dataUri) {
-        return new Promise<TableData>((resolve) => {
-          if (!this.data) throw new Error('No data provided, please provide data or dataUri');
-          let localData = Array.isArray(this.data?.data) ? this.data.data as RowData[] : [];
-
-          if (this.sortColumn) {
-            localData = localData.sort((a, b) => {
-              const aValue = a?.[this.sortColumn];
-              const bValue = b?.[this.sortColumn];
-              return this.sortData(aValue, bValue);
-            });
-          }
 
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-          const totalPages = Math.ceil(localData.length / (this.data.per_page as number ?? this.itemsPerPage));
-          const start = (this.page - 1) * this.itemsPerPage;
-          const end = start + this.itemsPerPage;
-          const paginatedData = localData.slice(start, end);
-
-          resolve({
-            page: this.page,
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-            per_page: this.data.per_page as number ?? this.itemsPerPage,
-            total: localData.length,
-            total_pages: totalPages,
-            data: paginatedData,
-          } satisfies TableData);
+      const requestData: DataRequest = {
+        page: this.page,
+        perPage: this.itemsPerPage,
+        sortColumn: this.sortColumn,
+        sortDirection: this.sortDirection,
+        filter: this.filter,
+      };
+
+      // get all inputs that are in the inputs slot and add them to the
+      const inputs = this.hasSlotController.getSlots(ActionSlots.inputs.valueOf());
+      const params: Record<string, any> = {};
+      if (inputs) {
+        inputs.forEach((input) => {
+          const allowedInputs = ['zn-input', 'zn-select', 'zn-query-builder', 'zn-multiselect', 'zn-params-select', 'input', 'select', 'textarea'];
+          if (allowedInputs.includes(input.tagName.toLowerCase())) {
+            const value = (input as AllowedInputElement).value as string || input.getAttribute('value');
+            const name = (input as AllowedInputElement).name || input.getAttribute('name');
+            if (name) {
+              params[name] = value;
+            }
+          }
         });
+        Object.assign(requestData, params);
+      }
+
+
+      // Add any extra request params
+      if (requestParams && typeof requestParams === 'object') {
+        Object.assign(requestData, requestParams);
       }
 
       // This is also used for Rubix, so it may not work for your application.
-      const response = await fetch(url, {
+      const response = await fetch(dataUri, {
+        method: this.method,
+        headers: {
+          'x-kx-fetch-style': 'zn-data-table',
+        },
         signal,
         credentials: 'same-origin',
+        body: this.method === 'POST' ? JSON.stringify(requestData) : undefined
       });
 
       if (!response.ok) throw new Error(response.statusText);
       return response.json();
     },
-    args: () => [this.dataUri]
+    args: () => [this.dataUri, this.requestParams]
   });
 
+  private rowHasActions: boolean = false;
+
+  requestParams: Record<string, any> = {};
+
+  builtinRequestParams: Record<string, any> = {};
+
+  refresh() {
+    // Allow manual refresh to trigger the first data load when no-initial-load is set
+    this._initialLoad = false;
+    this._dataTask.run().then(r => r);
+  }
+
   render() {
-    const tableBody = this._dataTask.render({
-      pending: () => {
-        if (this._initialLoad) {
+    // If no-initial-load is set, do not invoke the Task on the first render
+    let tableBody: TemplateResult;
+    if (this.noInitialLoad && this._initialLoad) {
+      tableBody = html`
+        <slot name="empty-state"></slot>`;
+    } else {
+      tableBody = this._dataTask.render({
+        pending: () => {
+          if (this._initialLoad) {
+            return html`
+              <div>${this.loadingTable()}</div>`;
+          }
+          return html`
+            <div class="reduced-opacity">${this._lastTableContent}</div>`;
+        },
+        complete: (data) => {
+          this._initialLoad = false;
+          this._lastTableContent = html`
+            <div>${this.renderTable(data as Response)}</div>`;
+          return this._lastTableContent;
+        },
+        error: (error) => {
+          if (error instanceof Error) {
+            if (error.name === "SyntaxError") {
+              console.debug(error.message)
+              return html`
+                <zn-sp>
+                  <zn-alert level="error">Unable to load data</zn-alert>
+                </zn-sp>`;
+            } else if (error.message === "Not Found") {
+              return this.emptyState();
+            }
+          }
           return html`
-            <div>${this.loadingTable()}</div>`;
+            <div>${error}</div>`
         }
-        return html`
-          <div class="reduced-opacity">${this._lastTableContent}</div>`;
-      },
-      complete: (data) => {
-        this._initialLoad = false;
-        this._lastTableContent = html`
-          <div>${this.renderTable(data as TableData)}</div>`;
-        return this._lastTableContent;
-      },
-      error: (error) => html`
-        <div>${error}</div>`
-    }) as TemplateResult;
+      }) as TemplateResult;
+    }
 
     const hasActions = this.hasSlotController.test(ActionSlots.delete.valueOf())
       || this.hasSlotController.test(ActionSlots.modify.valueOf())
       || this.hasSlotController.test(ActionSlots.create.valueOf())
       || this.hasSlotController.test(ActionSlots.sort.valueOf())
-      || this.hasSlotController.test(ActionSlots.filter.valueOf());
+      || this.hasSlotController.test(ActionSlots.filter.valueOf())
+      || this.hasSlotController.test(ActionSlots.filter_top.valueOf())
+      || this.hasSlotController.test(ActionSlots.inputs.valueOf());
 
     // Headers do not need to be re-rendered with new data
     return html`
@@ -362,28 +369,50 @@ export default class ZnDataTable extends ZincElement {
     }
   }
 
-  renderTable(data: TableData) {
-    this.itemsPerPage = data.per_page ?? DEFAULT_PER_PAGE;
-    this.page = data.page ?? DEFAULT_PAGE;
-    this.totalPages = data.total_pages ?? DEFAULT_TOTAL_PAGES;
+  emptyState() {
+    return html`
+      <div class="table--empty">
+        <zn-empty-state
+          caption="${this.emptyStateCaption ? this.emptyStateCaption : (this.caption ? "No " + this.caption.toLowerCase() + " found" : "No data found")}"
+          icon="${this.emptyStateIcon}">
+        </zn-empty-state>
+      </div>`;
+  }
 
-    if (!data?.data || data.data.length === 0) {
-      return html`
-        <div class="table--empty">
-          <zn-empty-state
-            caption="${this.caption ? "No " + this.caption.toLowerCase() + " found" : "No data found"}"
-            icon="data_alert">
-          </zn-empty-state>
-        </div>`;
+  renderTable(data: Response) {
+    this.itemsPerPage = Math.max(1, data.perPage ?? DEFAULT_PER_PAGE);
+    this.page = Math.max(1, data.page ?? DEFAULT_PAGE);
+    this.totalPages = Math.ceil(Math.max(1, data.total) / this.itemsPerPage);
+
+    if (!data?.rows || data.rows.length === 0) {
+      return this.emptyState();
     }
 
-    const keys = Object.entries(this.headers).map(([key, _]) => key);
-    const filteredKeys = keys.filter((key) => !Object.values(this.hiddenColumns).includes(key));
+    const filteredHeaders = Object.values(this.headers).filter((header) => {
+      return !Object.values(this.hiddenColumns).includes(header.key);
+    });
 
-    this._filteredRows = this.getRows(filteredKeys, data);
-    this._rows = this.getRows(keys, data);
+    this._rows = this.getRows(data);
 
     const hasSelectedRows = this.selectedRows.length > 0;
+    this.rowHasActions = this._rows.some((row: Row) => row.actions && row.actions.length > 0);
+
+    // To make sure the cells are in the same order as the headers, we need to map them cell.col to heading.key
+    this._rows.forEach((row: Row) => {
+      const orderedCells: Cell[] = [];
+      // const unorderedCells = row.cells.filter((c: Cell) => !filteredHeaders.some((h: HeaderConfig) => h.key === c.column));
+
+      filteredHeaders.forEach((header: HeaderConfig) => {
+        const cell = row.cells.find((c: Cell) => c.column === header.key);
+        if (cell) {
+          orderedCells.push(cell);
+        } else {
+          orderedCells.push({text: '', column: header.key});
+        }
+      });
+
+      row.cells = orderedCells;//.concat(unorderedCells);
+    });
 
     return html`
       <div style="overflow-x: auto">
@@ -399,17 +428,20 @@ export default class ZnDataTable extends ZincElement {
               <th>
                 <div><input type="checkbox" @change="${this.selectAll}"></div>
               </th>`}
-            ${filteredKeys.map((key: any) => this.renderCellHeader(key))}
+            ${filteredHeaders.map((header: HeaderConfig) => this.renderCellHeader(header))}
+            ${this.rowHasActions ? html`
+              <th></th>` : html``}
           </tr>
           </thead>
           <tbody>
-          ${this._filteredRows.map((row: any) => html`
+          ${this._rows.map((row: Row) => html`
             <tr>
               ${this.hideCheckboxes ? html`` : html`
                 <td class="${classMap({'hidden': !hasSelectedRows})}">
                   <div><input type="checkbox" @change="${this.selectRow}"></div>
                 </td>`}
-              ${row.map((value: RenderDataValue, index: number) => this.renderCellBody(index, value))}
+              ${row.cells.map((value: Cell, index: number) => this.renderCellBody(index, value))}
+              ${this.rowHasActions ? this.renderActions(row) : null}
             </tr>`)}
           </tbody>
         </table>
@@ -421,6 +453,8 @@ export default class ZnDataTable extends ZincElement {
 
   getTableHeader() {
     return html`
+      <slot name="${ActionSlots.filter_top.valueOf()}"></slot>
+      <slot name="${ActionSlots.inputs.valueOf()}" style="display: none"></slot>
       <div class="table__header">
         <div class="table__header__actions">
           ${this.getActions()}
@@ -460,7 +494,7 @@ export default class ZnDataTable extends ZincElement {
   }
 
   getPagination() {
-    if (this.hidePagination || (this.totalPages <= 1 && this._rows.length <= 10)) return null;
+    if (this.hidePagination || (this.totalPages <= 1 && this._rows.length <= this.itemsPerPage)) return null;
 
     const optionsRowsPerPage = [10, 20, 30, 40, 50];
     optionsRowsPerPage.filter((option) => option <= this._rows.length);
@@ -597,22 +631,6 @@ export default class ZnDataTable extends ZincElement {
     this.requestUpdate();
   }
 
-
-  private updateActionKeys(slotName: string) {
-    if (this.hasSlotController.test(slotName)) {
-      // we need to look into the slot controller for the keys input
-      const slots = this.hasSlotController.getSlots(slotName);
-      if (slots) {
-        slots.forEach((slot) => {
-          const input = slot.querySelector('input[name="keys"]');
-          if (input && input instanceof HTMLInputElement) {
-            input.value = this.getSelectedKeys().join(',');
-          }
-        });
-      }
-    }
-  }
-
   selectRow(e: PointerEvent) {
     if (!(e.target && (e.target instanceof Element))) {
       return;
@@ -670,181 +688,61 @@ export default class ZnDataTable extends ZincElement {
     };
   }
 
-  renderData(data: RenderDataValue) {
+  renderCell(data: Cell) {
     if (data && typeof data === 'object') {
-      let content: TemplateResult = html`${data['value']}`;
-
-      if (data['html']) {
-        return html`${unsafeHTML(data['html'])}`;
-      }
-
-      if (data['type'] === 'timestamp') {
-        const timestamp = typeof data['value'] === 'string' ? parseInt(data['value']) : data['value'];
-        content = html`${new Intl.DateTimeFormat('en-GB', {
-          dateStyle: 'medium',
-          timeStyle: 'short',
-          hourCycle: 'h12',
-          timeZone: 'UTC'
-        }).format(new Date(timestamp < 10000000000 ? timestamp * 1000 : timestamp))}`;
-      }
-
-      if (data['tag'] === 'zn-chip') {
-        const type = data['type'];
-        content = html`
-          <zn-chip type="${type}">${content}</zn-chip>`;
-      }
+      let content: TemplateResult = html`${data.text}`;
 
-      if (data['tag'] === 'code') {
+      if (data.style || data.color) {
         content = html`
-          <code>${content}</code>`;
+          <zn-style ${ifDefined(data.style || nothing)}
+                    color="${ifDefined(data.color || nothing)}">${content}
+          </zn-style>`;
       }
 
-      if (data['url']) {
+      if (data.uri) {
         content = html`
-          <a href="${data['url']}"
-             data-target="${ifDefined(data['target'])}"
-             gaid="${ifDefined(data['gaid'])}">${content}</a>`;
+          <a href="${data.uri}"
+             data-target="${ifDefined(data.target || nothing)}"
+             gaid="${ifDefined(data.gaid || nothing)}">${content}</a>`;
       }
 
-      if (data['caption']) {
-        let title = html`<span class="title">${data['caption'].title}</span>`;
-        let captionIcon = html``;
-
-        if (data['caption'].icon) {
-          const icon = data['caption'].icon;
-          const src = icon['src'] ?? icon;
-          const size = icon['size'] ?? 16;
-          const color = icon['color'] ?? '';
-
-          captionIcon = html`
-            <zn-icon src="${src}" size="${size}" color="${color}"></zn-icon>`;
-        }
-
-        if (data['caption'].uri) {
-          title = html` <a data-target="${ifDefined(data['caption'].target || nothing)}"
-                           href="${data['caption'].uri}"
-                           gaid="${ifDefined(data['caption'].gaid)}"
-                           class="title">
-            ${data['caption'].title}
-          </a>`
-        }
-
-        content = html`
-          <div class="${classMap({
-            'caption': true,
-            'caption--icon': data['caption'].icon !== undefined,
-          })}">
-            ${captionIcon}
-            <div>
-              ${title}
-              <span class="summary">${data['caption'].summary}</span>
-            </div>
-          </div>`;
+      if (data.chipColor) {
+        return html`
+          <zn-chip type="${data.chipColor}">${content}</zn-chip>`;
       }
 
-      if (data['hover']) {
-        const placement = data['hover'].placement ?? 'top';
+      if (data.hoverContent) {
+        const placement = data.hoverPlacement ?? 'top';
 
-        if (data['hover'].icon) {
-          const icon = data['hover'].icon;
-          const src = icon['src'] ?? icon;
-          const size = icon['size'] ?? 16;
-          const color = icon['color'] ?? '';
+        if (data.iconSrc) {
+          const src = data.iconSrc;
+          const color = data.iconColor ?? '';
 
           return html`
-            ${data['hover'].label}
+            ${content}
             <zn-hover-container placement="${placement}"
                                 flip>
-              <zn-icon src="${src}" size="${size}" color="${color}"></zn-icon>
+              <zn-icon src="${src}" color="${color}"></zn-icon>
               <div slot="content">
-                ${unsafeHTML(data['hover'].content)}
+                ${unsafeHTML(data.hoverContent)}
               </div>
             </zn-hover-container>`;
         }
 
         return html`
-          ${data['hover'].label}
           <zn-hover-container placement="${placement}"
                               flip>
-            <div slot="anchor">${data['hover'].anchor}</div>
-            ${unsafeHTML(data['hover'].content)}
+            <div slot="anchor">${content}</div>
+            ${unsafeHTML(data.hoverContent)}
           </zn-hover-container>`;
       }
 
-      if (data['menu']) {
-        return html`
-          <zn-dropdown>
-            <zn-button slot="trigger" icon="more_horiz" icon-size="24" color="transparent" size="content"></zn-button>
-            <zn-menu>
-              ${data['menu'].map((item: MenuConfig) => {
-                return html`
-                  <zn-menu-item id="${item.id}"
-                                href="${item.href}"
-                                gaid="${item.gaid}"
-                                data-target="${ifDefined(item.target)}">
-                    ${item.label}
-                  </zn-menu-item>`;
-              })}
-            </zn-menu>
-          </zn-dropdown>`
-      }
-
-      if (data['buttons']) {
-        content = html`
-          ${Object.values(data['buttons']).map((button) => {
-            if (button.confirm) {
-              return html`
-                <div>
-                  <zn-button
-                    id="${button.id}"
-                    size="${button.size}"
-                    color="${button.color}"
-                    icon="${button.icon}"
-                    icon-size="${button.iconSize}"
-                    tooltip="${button.tooltip}"
-                    outline="${ifDefined(button.outline)}">
-                    ${button.label || nothing}
-                  </zn-button>
-                  <zn-confirm
-                    fid="${button.confirm.fid}"
-                    trigger="${button.confirm.trigger}"
-                    type="${button.confirm.type}"
-                    caption="${button.confirm.caption}"
-                    content="${button.confirm.content}"
-                    action="${button.confirm.action}"></zn-confirm>
-                </div>`;
-            }
-            return html`
-              <zn-button
-                id="${button.id}"
-                href="${button.href}"
-                gaid="${button.gaid}"
-                size="${button.size}"
-                color="${button.color}"
-                icon="${button.icon}"
-                icon-size="${button.iconSize}"
-                tooltip="${button.tooltip}"
-                data-uri="${button.uri}"
-                data-target="${['modal', 'slide'].includes(button.target) ? button.target : nothing}"
-                target="${!['modal', 'slide'].includes(button.target) ? button.target : nothing}"
-                outline="${ifDefined(button.outline)}">
-                ${button.label || nothing}
-              </zn-button>`;
-          })}`;
-      }
+      if (data.iconSrc) {
+        const src = data.iconSrc;
+        const color = data.iconColor ?? '';
 
-      if (data['icon']) {
-        const icon = data['icon']?.['src'] ?? data['icon'];
-        const size = data['icon']?.['size'] ?? 16;
-        const color = data['icon']?.['color'] ?? '';
-
-        content = html`
-          <zn-icon src="${icon}" size="${size}" color="${color}"></zn-icon> ${content}`;
-      }
-
-      if (data['color']) {
-        content = html`
-          <zn-style color="${data['color']}">${content}</zn-style>`;
+        return html`
+          <zn-icon src="${src}" color="${color}"></zn-icon> ${content}`;
       }
 
       return content;
@@ -853,6 +751,21 @@ export default class ZnDataTable extends ZincElement {
     return data;
   }
 
+  private updateActionKeys(slotName: string) {
+    if (this.hasSlotController.test(slotName)) {
+      // we need to look into the slot controller for the keys input
+      const slots = this.hasSlotController.getSlots(slotName);
+      if (slots) {
+        slots.forEach((slot) => {
+          const input = slot.querySelector('input[name="keys"]');
+          if (input && input instanceof HTMLInputElement) {
+            input.value = this.getSelectedKeys().join(',');
+          }
+        });
+      }
+    }
+  }
+
   private getTableSortIcon(key: any) {
     if (this.sortColumn !== key) {
       return html`
@@ -874,68 +787,33 @@ export default class ZnDataTable extends ZincElement {
       </div>`;
   }
 
-  private renderCellHeader(key: string) {
-    const sortable = !Object.values(this.unsortableHeaders).includes(key) && !Object.values(this.hiddenHeaders).includes(key) && !this.unsortable;
-    let headerKeys = Object.keys(this.headers);
-    headerKeys = headerKeys.filter((k) => !Object.values(this.hiddenColumns).includes(k));
-    const header: string | HeaderConfig = this.headers[key];
-
-    if (this.hasHeaderPosition(header)) {
-      return html`
-        <th
-          class="${classMap({
-            'table__head': true,
-            'table__head--wide': key === this.wideColumn,
-            'table__head--last': key === headerKeys[headerKeys.length - 1],
-            'table__head--hidden': Object.values(this.hiddenHeaders).includes(key),
-            [`table__head--${header.position}`]: true
-          })}"
-          @click="${sortable ? this.updateSort(key) : undefined}">
-          <div>
-            ${header.title}
-            ${sortable ? this.getTableSortIcon(key) : nothing}
-          </div>
-        </th>
-      `;
-    }
+  private renderCellHeader(header: HeaderConfig) {
+    const sortable = !Object.values(this.unsortableHeaders).includes(header.key) && !Object.values(this.hiddenHeaders).includes(header.key) && !this.unsortable;
+    const lastHeader = Object.keys(this.headers).filter((key) => !Object.values(this.hiddenColumns).includes(key)).slice(-1)[0];
+    const lastHeaderKey = lastHeader ? this.headers[lastHeader].key : '';
 
     return html`
       <th
         class="${classMap({
           'table__head': true,
-          'table__head--wide': key === this.wideColumn,
-          'table__head--last': key === headerKeys[headerKeys.length - 1],
-          'table__head--hidden': Object.values(this.hiddenHeaders).includes(key),
+          'table__head--wide': header.key === this.wideColumn,
+          'table__head--last': header.key === lastHeaderKey,
+          'table__head--hidden': Object.values(this.hiddenHeaders).includes(header.key),
         })}"
-        @click="${sortable ? this.updateSort(key) : undefined}">
+        @click="${sortable ? this.updateSort(header.key) : undefined}">
         <div>
-          ${header}
-          ${sortable ? this.getTableSortIcon(key) : nothing}
+          ${header.label}
+          ${sortable ? this.getTableSortIcon(header.key) : nothing}
         </div>
       </th>
     `;
   }
 
-  private renderCellBody(index: number, value: RenderDataValue) {
+  private renderCellBody(index: number, value: Cell) {
     const headerKeys: string[] = Object.keys(this.headers).filter(
       (key) => !Object.values(this.hiddenColumns).includes(key)
     );
     const headerKey: string = headerKeys[index];
-    const header = this.headers[headerKey];
-
-    if (this.hasHeaderPosition(header)) {
-      return html`
-        <td
-          @click="${this.selectRow}"
-          class="${classMap({
-            'table__cell': true,
-            'table__cell--wide': headerKey === this.wideColumn,
-            'table__cell--last': headerKey === headerKeys[headerKeys.length - 1],
-            [`table__cell--${header.position}`]: true
-          })}">
-          <div>${this.renderData(value)}</div>
-        </td>`;
-    }
 
     return html`
       <td
@@ -945,32 +823,49 @@ export default class ZnDataTable extends ZincElement {
           'table__cell--wide': headerKey === this.wideColumn,
           'table__cell--last': headerKey === headerKeys[headerKeys.length - 1],
         })}">
-        <div>${this.renderData(value)}</div>
+        <div>${this.renderCell(value)}</div>
       </td>`;
   }
 
-  private hasHeaderPosition(header: string | HeaderConfig) {
-    return typeof header === 'object' && header !== null && 'position' in header && 'title' in header;
-  }
+  private getRows(data: Response): Row[] {
+    const sourceRows = data.rows;
 
-  private getRows(keys: string[], data: TableData) {
-    let rows = Object.values(data.data).map((row: any) => {
-      return keys.map((header: any) => row[header]);
-    });
+    if (this.sortColumn) {
+      const headerKeys = Object.keys(this.headers);
+      const sortIndex = headerKeys.indexOf(this.sortColumn);
 
-    if (this.dataUri && this.sortColumn) {
-      // sort the rows by the key
-      rows = rows.sort((a, b) => {
-        return this.sortData(a[keys.indexOf(this.sortColumn)], b[keys.indexOf(this.sortColumn)]);
+      sourceRows.sort((rowA: Row, rowB: Row) => {
+        const getCellForSort = (row: Row): Cell => {
+          const byHeading = row.cells.find((cell: Cell) => cell.column === this.sortColumn);
+          if (byHeading !== undefined) return byHeading as unknown as Cell;
+          return row.cells[sortIndex];
+        };
+
+        const aVal = getCellForSort(rowA);
+        const bVal = getCellForSort(rowB);
+        return this.sortData(aVal, bVal);
       });
     }
 
-    return rows;
+    return sourceRows;
   }
 
-  private getSelectedKeys() {
+  private getSelectedKeys(): (string)[] {
     const headerKeys = Object.keys(this.headers);
-    return this.selectedRows.map((row) => row[headerKeys.indexOf(this.key)]);
+    const keyIndex = headerKeys.indexOf(this.key);
+
+    return this.selectedRows
+      .map((row: Row) => {
+        if (this.key === 'id' || keyIndex === -1) {
+          return row.id;
+        }
+        const cell = row.cells?.[keyIndex] as Cell;
+        if (cell.sortValue) {
+          return cell.sortValue;
+        }
+        return cell.text as string;
+      })
+      .filter((v): v is string => v !== undefined && v !== null);
   }
 
   private updateKeys() {
@@ -986,36 +881,27 @@ export default class ZnDataTable extends ZincElement {
     this.updateActionKeys('delete-action');
   }
 
-  private sortData(a: RenderDataValue | string | number | object | undefined, b: RenderDataValue | string | number | object | undefined) {
-    if (a === undefined || b === undefined) {
-      return 0;
+  private extractComparable(cell: Cell): string {
+    const sortValue = cell.sortValue;
+    if (sortValue) {
+      return sortValue;
     }
 
-    if (typeof a === 'object' && 'caption' in a && 'title' in a.caption) {
-      a = a.caption.title as string;
-    } else if (typeof a === 'object' && a && 'value' in a) {
-      a = a.value as string | number;
-    }
+    return cell.text;
+  }
 
-    if (typeof b === 'object' && 'caption' in b && 'title' in b.caption) {
-      b = b.caption.title as string;
-    } else if (typeof b === 'object' && b && 'value' in b) {
-      b = b.value as string | number;
-    }
+  private sortData(a: Cell, b: Cell) {
+    const aCompare = this.extractComparable(a);
+    const bCompare = this.extractComparable(b);
 
-    if (typeof a === 'string') {
-      a = a.toLowerCase();
-    }
-
-    if (typeof b === 'string') {
-      b = b.toLowerCase();
-    }
+    const aNormal = aCompare.toLowerCase();
+    const bNormal = bCompare.toLowerCase();
 
     if (this.sortDirection === 'asc') {
-      return a > b ? 1 : a < b ? -1 : 0;
+      return aNormal > bNormal ? 1 : aNormal < bNormal ? -1 : 0;
     }
 
-    return a < b ? 1 : a > b ? -1 : 0;
+    return aNormal < bNormal ? 1 : aNormal > bNormal ? -1 : 0;
   }
 
   private loadingTable() {
@@ -1090,4 +976,57 @@ export default class ZnDataTable extends ZincElement {
         </table>
       </div>`;
   }
+
+  private renderActions(row: Row) {
+    if ((row.actions === null || row.actions === undefined) && this.rowHasActions) {
+      // return an empty cell to keep the table structure
+      return html`
+        <td></td>`;
+    }
+
+    if (!row.actions || row.actions.length === 0) {
+      return html``;
+    }
+
+    return html`
+      <td class="table__cell table__cell--actions">
+        <zn-dropdown placement="bottom-end">
+          <zn-button slot="trigger"
+                     icon="more_vert"
+                     size="small"
+                     color="transparent"
+                     icon-size="24"
+                     aria-label="Row actions">
+          </zn-button>
+          <zn-menu>
+            ${row.actions?.map((action: ActionConfig) => {
+              if (action.confirmContent) {
+                const triggerId = 'confirm-action-' + Math.random().toString(36).substring(2, 15);
+                return html`
+                  <zn-confirm trigger="${triggerId}"
+                              type="${ifDefined(action.confirmType)}"
+                              caption="${action.confirmTitle}"
+                              content="${action.confirmContent}"
+                              action="${action.uri}"></zn-confirm>
+                  <zn-menu-item id="${triggerId}">
+                    ${(action.icon) ? html`
+                      <zn-icon src="${action.icon}" size="20" slot="prefix"></zn-icon>` : html``}
+                    ${action.text}
+                  </zn-menu-item>`;
+              } else {
+                return html`
+                  <zn-menu-item value="${action.text}"
+                                href="${action.uri}"
+                                gaid="${ifDefined(action.gaid || nothing)}"
+                                data-target="${ifDefined(action.target || nothing)}">
+                    ${(action.icon) ? html`
+                      <zn-icon src="${action.icon}" size="20" slot="prefix"></zn-icon>` : html``}
+                    ${action.text}
+                  </zn-menu-item>`;
+              }
+            })}
+          </zn-menu>
+        </zn-dropdown>
+      </td>`;
+  }
 }