diff --git a/packages/documentation/pages/usage/components/table.vue b/packages/documentation/pages/usage/components/table.vue
index f53284079b..a223c75d4c 100644
--- a/packages/documentation/pages/usage/components/table.vue
+++ b/packages/documentation/pages/usage/components/table.vue
@@ -731,10 +731,10 @@ It is possible to customize parts (columns) of the table by passing your own ren
```js
renderLoading() {
- return Loading while the loading prop on KtTable is true
+ return Custom loading render
},
renderEmpty() {
- return Hello
+ return Custom empty render
},
```
@@ -744,7 +744,7 @@ You can also use slots instead of render props. [`slot="loading"`, `slot="empty"
- Loading while the loading prop on KtTable is true
+ Custom loading via slot
@@ -753,7 +753,7 @@ You can also use slots instead of render props. [`slot="loading"`, `slot="empty"
```html
- Loading while the loading prop on KtTable is true
+ Custom loading via slot
```
@@ -764,7 +764,7 @@ You can also use slots instead of render props. [`slot="loading"`, `slot="empty"
- Hello, Empty World!
+ Custom empty via slot
@@ -773,7 +773,7 @@ You can also use slots instead of render props. [`slot="loading"`, `slot="empty"
```html
- Hello, Empty World!
+ Custom empty via slot
```
@@ -1197,10 +1197,10 @@ export default {
return new Date(value).toUTCString()
},
renderEmpty() {
- return Hello
+ return Custom empty render
},
renderLoading() {
- return Loading while the loading prop on KtTable is true
+ return Custom loading render
},
renderExpand(h, { row }) {
return (
diff --git a/packages/kotti-ui/source/kotti-style/_tables.scss b/packages/kotti-ui/source/kotti-style/_tables.scss
deleted file mode 100644
index b1b87c5008..0000000000
--- a/packages/kotti-ui/source/kotti-style/_tables.scss
+++ /dev/null
@@ -1,109 +0,0 @@
-@import '../kotti-style/_variables.scss';
-
-table {
- position: relative;
- width: 100%;
- hyphens: auto;
- table-layout: auto;
- border-collapse: collapse;
-
- th {
- padding: var(--unit-2) var(--unit-1);
- font-size: $font-size-sm;
- line-height: 1em;
- color: $lightgray-500;
- text-align: inherit;
- text-transform: uppercase;
- border-bottom: $border-width solid $border-color;
- }
-
- tr {
- position: relative;
- margin: 0;
-
- &:hover .table-actions {
- display: inline-flex;
- justify-content: center;
- background: #ffffff;
- }
-
- &.selected,
- &:focus {
- background: $lightgray-300;
- }
-
- &:focus {
- outline: none;
- }
- }
-
- td {
- position: relative;
- padding: var(--unit-2) var(--unit-1);
- line-height: 1.2rem;
- border-bottom: 1px solid #dbdbdb;
-
- &.empty {
- color: $lightgray-500;
- text-align: center;
- }
- }
-
- i {
- margin: 0 0.2rem;
- font-size: 1rem !important;
- color: $darkgray-300;
-
- &.disabled {
- color: $lightgray-500;
- }
- }
-
- .table-actions {
- position: absolute;
- top: 50%;
- right: 0.8rem;
- z-index: $zindex-4;
- display: none;
- float: right;
- width: auto;
- padding: 0.25rem;
- margin-top: -0.8rem;
- font-size: 0.8rem;
- line-height: 0.8rem;
- border: 0;
- border-radius: var(--border-radius);
- box-shadow: 0 0 1px #999;
-
- i {
- margin: 0 var(--unit-1);
- color: $lightgray-500;
-
- &:hover {
- color: $darkgray-500;
- cursor: pointer;
- }
- }
- }
-
- .form-group {
- width: 32px;
- line-height: 0;
-
- .form-icon {
- top: 0.2rem;
- }
- }
-
- &.no-header {
- margin-top: -0.5em;
- }
-}
-
-.x-scroll {
- display: block;
- width: 100%;
- height: 100%;
- overflow-x: auto;
- white-space: nowrap;
-}
diff --git a/packages/kotti-ui/source/kotti-style/index.scss b/packages/kotti-ui/source/kotti-style/index.scss
index cc1e5b73e9..475a36f7d2 100644
--- a/packages/kotti-ui/source/kotti-style/index.scss
+++ b/packages/kotti-ui/source/kotti-style/index.scss
@@ -22,7 +22,6 @@
@import 'codes';
@import 'forms';
@import 'loadings';
-@import 'tables';
@import 'typography';
// tippy.js
diff --git a/packages/kotti-ui/source/kotti-table/KtTable.vue b/packages/kotti-ui/source/kotti-table/KtTable.vue
index 6835fe70cf..96230c71f6 100644
--- a/packages/kotti-ui/source/kotti-table/KtTable.vue
+++ b/packages/kotti-ui/source/kotti-table/KtTable.vue
@@ -322,8 +322,114 @@ export default {
@import '../kotti-style/_variables.scss';
+table.kt-table {
+ position: relative;
+ width: 100%;
+ hyphens: auto;
+ table-layout: auto;
+ border-collapse: collapse;
+}
+
+::v-deep table.kt-table th {
+ padding: var(--unit-2) var(--unit-1);
+ font-size: $font-size-sm;
+ line-height: 1em;
+ color: $lightgray-500;
+ text-align: inherit;
+ text-transform: uppercase;
+}
+
+::v-deep table.kt-table tr {
+ position: relative;
+ margin: 0;
+
+ &:hover .table-actions {
+ display: inline-flex;
+ justify-content: center;
+ background: var(--white);
+ }
+
+ &.disabled {
+ cursor: not-allowed;
+ background-color: var(--ui-01);
+ opacity: 0.6;
+ }
+
+ &.selected,
+ &:focus {
+ background: var(--ui-01);
+ }
+
+ &:focus {
+ outline: none;
+ }
+}
+
+::v-deep table.kt-table td {
+ position: relative;
+ padding: var(--unit-2) var(--unit-1);
+ line-height: 1.2rem;
+ border-bottom: 1px solid $lightgray-400;
+
+ &.empty {
+ color: $lightgray-500;
+ text-align: center;
+ }
+}
+
+::v-deep table.kt-table .expand-toggle i {
+ margin: 0 0.2rem;
+ font-size: 1rem !important;
+ color: $darkgray-300;
+
+ &.disabled {
+ color: $lightgray-500;
+ }
+}
+
+::v-deep table.kt-table .table-actions {
+ position: absolute;
+ top: 50%;
+ right: 0.8rem;
+ z-index: $zindex-4;
+ display: none;
+ float: right;
+ width: auto;
+ padding: 0.25rem;
+ margin-top: -0.8rem;
+ font-size: 0.8rem;
+ line-height: 0.8rem;
+ border: 0;
+ border-radius: var(--border-radius);
+ box-shadow: 0 0 1px #999;
+
+ > div {
+ display: flex;
+ flex-direction: row;
+ }
+
+ i {
+ margin: 0 var(--unit-1);
+ color: $lightgray-500;
+
+ &:hover {
+ color: $darkgray-500;
+ cursor: pointer;
+ }
+ }
+}
+
+::v-deep table.kt-table .form-group {
+ width: 32px;
+ line-height: 0;
+
+ .form-icon {
+ top: 0.2rem;
+ }
+}
+
::v-deep .kt-table .kt-table__no-row {
- color: #8f8f8f;
+ color: $lightgray-500;
text-align: center;
}
@@ -336,14 +442,12 @@ export default {
text-align: center;
}
-::v-deep .kt-table tr.disabled {
- cursor: not-allowed;
- background-color: #f8f8f8;
- opacity: 0.6;
-}
-
.x-scroll {
- height: auto;
+ display: block;
+ width: 100%;
+ height: 100%;
+ overflow-x: auto;
+ white-space: nowrap;
}
.hidden-columns {
diff --git a/packages/kotti-ui/source/kotti-table/components/TableRow.jsx b/packages/kotti-ui/source/kotti-table/components/TableRow.jsx
index ab59496f64..8ab8393cd1 100644
--- a/packages/kotti-ui/source/kotti-table/components/TableRow.jsx
+++ b/packages/kotti-ui/source/kotti-table/components/TableRow.jsx
@@ -147,7 +147,7 @@ export const TableRow = {
class="c-hand"
onClick={($event) => handleExpand($event, row, rowIndex)}
>
-