diff --git a/packages/data-table-view/assets/index.html b/packages/data-table-view/assets/index.html
index 512fd934ab5f5399c9e58f098f5b5beba26eecab..edb12fa5585d06790922d4d3259466db7d5ebc5c 100644
--- a/packages/data-table-view/assets/index.html
+++ b/packages/data-table-view/assets/index.html
@@ -4,6 +4,13 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="module" id="vpu-data-table-view-src" src="vpu-data-table-view-demo.js"></script>
+
+ <style>
+ body {
+ font-family: sans-serif;
+ }
+ </style>
+
</head>
<body>
diff --git a/packages/data-table-view/src/vpu-data-table-view.js b/packages/data-table-view/src/vpu-data-table-view.js
index e7b8ade9a095b5dfd4676e9f0c754e00bba6b786..36f0ee352cea3064c450fcddd5db2b859b02aa41 100644
--- a/packages/data-table-view/src/vpu-data-table-view.js
+++ b/packages/data-table-view/src/vpu-data-table-view.js
@@ -8,10 +8,10 @@ import bttn2 from 'datatables.net-buttons';
import bttnHtml5 from 'datatables.net-buttons/js/buttons.html5.js';
import bttnPrint from 'datatables.net-buttons/js/buttons.print.js';
import {i18n} from './i18n';
-import {css, html, LitElement} from 'lit-element';
+import {css, html, LitElement, unsafeCSS} from 'lit-element';
import de from '../assets/datatables/i18n/German';
import en from '../assets/datatables/i18n/English';
-
+import {getIconSVGURL} from 'vpu-common/vpu-icon';
import * as commonUtils from 'vpu-common/utils';
import * as commonStyles from 'vpu-common/styles';
@@ -156,11 +156,54 @@ class DataTableView extends LitElement {
}
static get styles() {
+ const orderExpandIconOverrides = css`
+ table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child::before, table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th:first-child::before {
+ all: initial;
+ top: 0.7em;
+ left: 0.4em;
+ height: 1em;
+ width: 1em;
+ display: block;
+ cursor: pointer;
+ position: absolute;
+ box-sizing: content-box;
+ text-align: center;
+ text-indent: 0 !important;
+ line-height: 0.9em;
+ color: var(--vpu-primary-text-color);
+ background-color: var(--vpu-primary-bg-color);
+ content: '+';
+ }
+
+ table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child::before, table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child::before {
+ content: '-';
+ }
+
+ table.dataTable thead .sorting {
+ background-image: url('${unsafeCSS(getIconSVGURL('chevron-up'))}'), url('${unsafeCSS(getIconSVGURL('chevron-down'))}');
+ background-position: 100% 40%, 100% 60%;
+ background-size: 0.5em, 0.5em;
+ }
+
+ table.dataTable thead .sorting_desc {
+ background-image: url('${unsafeCSS(getIconSVGURL('chevron-up'))}');
+ background-position: 100% 50%;
+ background-size: 0.8em;
+ }
+
+ table.dataTable thead .sorting_asc {
+ background-image: url('${unsafeCSS(getIconSVGURL('chevron-down'))}');
+ background-size: 0.8em;
+ background-position: 100% 50%;
+ }
+ `;
+
// language=css
return css`
${commonStyles.getThemeCSS()}
${commonStyles.getGeneralCSS()}
${commonStyles.getButtonCSS()}
+ ${orderExpandIconOverrides}
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
color: var(--vpu-muted-text);
@@ -181,6 +224,14 @@ class DataTableView extends LitElement {
:host {
display: block;
}
+
+ .dataTables_filter input {
+ border-radius: 0;
+ border-style: solid;
+ border-color: var(--vpu-dark);
+ border-width: 1px;
+ padding: 0.1em;
+ }
`;
}
diff --git a/packages/data-table-view/vendor/common b/packages/data-table-view/vendor/common
index 23b8594e32880811e19354be4e7bed714852e3a4..356b9b33c853361ba9585ccb40e61d1293b09922 160000
--- a/packages/data-table-view/vendor/common
+++ b/packages/data-table-view/vendor/common
@@ -1 +1 @@
-Subproject commit 23b8594e32880811e19354be4e7bed714852e3a4
+Subproject commit 356b9b33c853361ba9585ccb40e61d1293b09922