vueless 0.0.2 → 0.0.3

package/ui.data-table/index.vue

@@ -1,1101 +1,740 @@
 <template>
-  <div class="mono-table-wrapper" :data-cy="dataCy">
+  <div :data-cy="dataCy" v-bind="wrapperAttrs">
     <div
-      v-show="isShownFixedOrActionsHeader"
-      ref="headerFixedRow"
-      class="mono-table-custom-header"
-      :class="[headerClasses.actionsHeader, headerClasses.fixedHeader, headerClasses.compact]"
+      v-show="isShownStickyOrActionsHeader"
+      ref="headerStickyRow"
       :style="tableRowWidthStyle"
+      v-bind="customHeaderAttrs"
     >
       <UCheckbox
         v-if="selectable"
         v-model="selectAll"
-        :partial="!isSelectedAllRows"
-        class="mono-table-custom-header-item"
         size="sm"
+        :partial="!isSelectedAllRows"
+        :data-cy="`${dataCy}-select-all`"
+        v-bind="selectAllCheckboxAttrs"
       />
 
-      <template v-if="selectedRowsLength">
-        <div class="selected-rows-count">
-          {{ selectedRowsLength }}
-        </div>
+      <template v-if="selectedRows.length">
+        <div v-bind="selectedRowsCountAttrs" v-text="selectedRows.length" />
 
-        <!-- @slot Use it to add actions instead table head (it appears when you select items in table). -->
+        <!-- @slot Use it to add actions instead table head (it appears when you select rows in table). -->
         <slot name="thead-actions" :selected-rows="selectedRows" />
       </template>
 
       <template v-else>
         <div
-          v-for="(item, index) in headers"
+          v-for="(column, index) in columns"
           :key="index"
-          class="mono-table-custom-header-item"
-          :class="item.thClass"
+          v-bind="customHeaderItemAttrs(column.thClass)"
         >
-          <template v-if="isExistSlot(`thead-${item.value}`)">
-            <!-- @slot Use it to customise table header item. -->
-            <slot :name="`thead-${item.value}`" :text="item.text" />
+          <template v-if="hasSlotContent($slots[`thead-${column.key}`])">
+            <!-- @slot Use it to customise table column. -->
+            <slot :name="`thead-${column.key}`" :label="column.label" />
           </template>
 
           <template v-else>
-            {{ item.text }}
+            {{ column.label }}
           </template>
+
+          <!-- @slot Use it to add content after table column. -->
+          <slot :name="`thead-${column.key}-after`" />
         </div>
       </template>
 
-      <UTopLoader
-        v-if="loaderResourceName && isFixedHeader"
-        class="table-fixed-loader"
-        :resource-names="loaderResourceName"
+      <!-- TODO: Change to loaders config after laoader refactoring -->
+      <ULoaderTop
+        v-if="resource && isHeaderSticky"
+        :resource-names="resource"
         position="absolute"
+        v-bind="headerStickyLoaderAttrs"
       />
     </div>
 
-    <div ref="tableWrapper" class="mono-table-inner-wrapper" :class="tableWrapClass">
-      <t-table class="mono-table" :data="tableItems" :headers="headers" :class="tableClasses">
-        <template #thead="{ thClass, data }">
-          <thead>
-            <tr ref="headerRow" :class="headerClasses.hideHeader">
-              <th v-if="selectable" class="table-checkbox">
-                <UCheckbox
-                  v-model="selectAll"
-                  size="sm"
-                  :show-partial-icon="!isSelectedAllRows"
-                  partial
-                  :data-cy="`${dataCy}-select-all`"
-                />
-              </th>
-
-              <th v-for="(item, index) in data" :key="index" :class="[thClass, item.thClass]">
-                <template v-if="isExistSlot(`thead-${item.value}`)">
-                  <!-- @slot Use it to customise table header item. -->
-                  <slot :name="`thead-${item.value}`" :text="item.text" />
-                </template>
-
-                <template v-else>
-                  {{ item.text }}
-                </template>
-              </th>
-            </tr>
-            <UTopLoader
-              v-if="loaderResourceName"
-              class="table-loader"
-              :resource-names="loaderResourceName"
-              position="absolute"
-            />
-          </thead>
-        </template>
-
-        <template #row="{ row, rowIndex }">
-          <tr
-            v-if="rowIndex === firstRow && isShownSlot.beforeFirstRow"
-            class="more-row"
-            :class="beforeFirstRowClass"
-          >
-            <td v-if="isShownSlot.beforeFirstRow" :colspan="colsCount" :class="firstRowClass">
-              <!-- @slot Use it to add something before first row. -->
-              <slot name="before-first-row" />
-            </td>
-
-            <td v-else class="first-row" />
+    <div ref="tableWrapper" v-bind="tableWrapperAttrs">
+      <table v-bind="tableAttrs">
+        <thead v-bind="headerAttrs" :style="tableRowWidthStyle">
+          <tr v-if="hasSlotContent($slots['before-header-row'])" v-bind="headerRowAttrs">
+            <slot name="before-header-row" />
           </tr>
 
-          <DateSeparator
-            v-if="isShownDateSeparator(rowIndex, row.date)"
-            :class="dateSeparatorRowClass(rowIndex)"
-            :date="row.date.primaryRow || row.date"
-            :cols-count="colsCount"
-            :i18n="i18n"
-          />
-
-          <tr
-            v-if="!isShownRow(row)"
-            class="table-row"
-            :class="rowClass(row)"
-            :data-cy="`${dataCy}-row`"
-            @click="onClickRow(row)"
-          >
-            <td v-if="selectable" class="col-checkbox">
-              <TableCheckbox
-                v-model:values="selectedRows"
-                :value="rowIndex"
-                :data-cy="`${dataCy}-table-body-checkbox`"
-                @click.stop="onClickSelectRow(rowIndex)"
+          <tr ref="headerRow" v-bind="headerRowCellAttrs">
+            <th v-if="selectable" v-bind="headerCellAttrs(config.headerCheckboxWrapper)">
+              <UCheckbox
+                v-model="selectAll"
+                size="sm"
+                :partial="!isSelectedAllRows"
+                :data-cy="`${dataCy}-select-all`"
+                v-bind="headerSelectAllCheckboxAttrs"
               />
-            </td>
+            </th>
 
-            <td
-              v-for="(value, key, index) in getFilteredRow(row)"
+            <th
+              v-for="(column, index) in normalizedColumns"
               :key="index"
-              :class="getTdClass(key)"
+              v-bind="headerCellAttrs(column.thClass)"
             >
-              <template v-if="isExistSlot(`cell-${key}`)">
-                <div
-                  :class="tableContainerClass(index)"
-                  :style="setLeftMargin(row.nestedLevel)"
-                  @click="onClickShowItem(row)"
-                >
-                  <div v-if="isShownIcon({ index, row })" class="table-button">
-                    <UIcon
-                      v-if="row.isHidden"
-                      name="add"
-                      class="table-container-icon"
-                      size="xs"
-                      :color="isIconActive(row)"
-                      variant="light"
-                      interactive
-                    />
-
-                    <UIcon
-                      v-else
-                      name="remove"
-                      class="table-container-icon"
-                      size="xs"
-                      variant="light"
-                      interactive
-                    />
-                  </div>
-                  <!-- @slot Use it to customise table cell item (in whole column). -->
-                  <slot :name="`cell-${key}`" :value="value" />
-                </div>
+              <template v-if="hasSlotContent($slots[`thead-${column.key}`])">
+                <!-- @slot Use it to customise table column. -->
+                <slot :name="`thead-${column.key}`" :label="column.label" />
               </template>
 
-              <template v-else-if="isExistSlot('cell-other')">
-                <slot name="cell-other" :value="value" />
+              <template v-else>
+                {{ column.label }}
               </template>
 
-              <template v-else-if="key === 'date'">
-                <div v-if="value.format">
-                  {{ dateConverter(value.timestamp, value.format) }}
-                </div>
+              <!-- @slot Use it to add content after table column. -->
+              <slot :name="`thead-${column.key}-after`" />
+            </th>
+          </tr>
 
-                <div v-else>
-                  {{ dateConverter(value) }}
-                </div>
-              </template>
+          <!-- TODO: Change to loaders config after laoader refactoring -->
+          <ULoaderTop
+            v-if="resource"
+            :resource-names="resource"
+            position="absolute"
+            v-bind="tableLoaderAttrs"
+          />
+        </thead>
+
+        <tbody v-if="tableRows.length" v-bind="bodyAttrs">
+          <template v-for="(row, rowIndex) in tableRows" :key="row.id">
+            <tr v-if="rowIndex === firstRow" v-bind="beforeFirstRowAttrs">
+              <UTableCell
+                v-if="hasSlotContent($slots['before-first-row'])"
+                :colspan="colsCount"
+                :compact="compact"
+                v-bind="beforeFirstRowCellAttrs"
+              >
+                <!-- @slot Use it to add something before first row. -->
+                <slot name="before-first-row" />
+              </UTableCell>
+
+              <td v-else :colspan="colsCount" v-bind="beforeFirstRowCellAttrs" />
+            </tr>
 
-              <template v-else-if="key === 'email'">
-                <div @click.stop>
-                  <ULink :text="value" :url="`mailto:${value}`" size="sm" />
-                </div>
-              </template>
+            <tr v-if="isShownDateSeparator(rowIndex) && row.date" v-bind="dateSeparatorRowAttrs">
+              <td :colspan="colsCount">
+                <UDivider
+                  size="xs"
+                  :label="getDateSeparatorLabel(row.date.separatorDate)"
+                  v-bind="dateSeparatorAttrs"
+                />
+              </td>
+            </tr>
 
-              <template v-else-if="key === 'link'">
-                <ULink
-                  v-if="value.route"
-                  :data-cy="`${dataCy}-${key}-link`"
-                  :text="value.label"
-                  router-link
-                  :route="value.route"
+            <tr
+              v-if="!isShownRow(row)"
+              v-bind="bodyRowAttrs(rowClass(row))"
+              :data-cy="`${dataCy}-row`"
+              @click="onClickRow(row)"
+            >
+              <td v-if="selectable" :data-id="row.id" v-bind="checkboxBodyWrapperCellAttrs">
+                <UCheckbox
+                  v-model="selectedRows"
+                  :value="row.id"
                   size="sm"
+                  :data-cy="`${dataCy}-table-body-checkbox`"
+                  v-bind="tableCheckboxAttrs"
+                  @click.stop="onClickSelectRow(row.id)"
                 />
+              </td>
+
+              <UTableCell
+                v-for="(value, key, index) in TableService.getFilteredRow(row, columns)"
+                :key="index"
+                :compact="compact"
+                v-bind="bodyCellAttrs(getTdClass(key))"
+              >
+                <template v-if="Boolean($slots[`cell-${key}`])">
+                  <div
+                    :style="setLeftMargin(row.nestedLevel)"
+                    v-bind="toggleButtonWrapperAttrs(index)"
+                    @click="onClickShowItem(row)"
+                  >
+                    <div v-if="isShownIcon({ index, row })" v-bind="toggleItemButtonAttrs">
+                      <UIcon
+                        v-if="row.isHidden"
+                        :name="config.expandIconName"
+                        interactive
+                        size="xs"
+                        :color="isIconActive(row)"
+                        v-bind="expandIconAttrs"
+                      />
+
+                      <UIcon
+                        v-else
+                        :name="config.collapseIconName"
+                        interactive
+                        size="xs"
+                        v-bind="collapseIconAttrs"
+                      />
+                    </div>
+                    <!-- @slot Use it to customise table cell item (in whole column). -->
+                    <slot :name="`cell-${key}`" :value="value" :row="row" />
+                  </div>
+                </template>
 
-                <span v-else>
-                  {{ value }}
-                </span>
-              </template>
-
-              <template v-else-if="key === 'money'">
-                <UMoney :sum="value.sum" :currency-symbol="value.currencySymbol" />
-              </template>
+                <template v-else-if="Boolean($slots['cell-other'])">
+                  <slot name="cell-other" :value="value" :row="row" />
+                </template>
 
-              <template v-else-if="key === 'tags'">
-                <div class="tags-cell">
-                  <UTag
-                    v-for="item in value.tags"
-                    :key="item"
-                    :text="item"
-                    :color="value.variant"
-                  />
-                </div>
-              </template>
+                <template v-else-if="value.hasOwnProperty('secondaryRow')">
+                  <div :data-cy="`${dataCy}-${key}-cell`">
+                    {{ value.primaryRow || HYPHEN_SYMBOL }}
+                  </div>
 
-              <template v-else-if="value.hasOwnProperty('secondaryRow')">
-                <div :data-cy="`${dataCy}-${key}-cell`">
-                  {{ value.primaryRow || emptyItem }}
-                </div>
-
-                <div class="secondary-row">
-                  <template v-if="Array.isArray(value.secondaryRow)">
-                    <div v-for="(secondaryRow, idx) in value.secondaryRow" :key="idx">
-                      <span class="children-empty">
-                        {{ secondaryRow }}
-                      </span>
-                    </div>
-                  </template>
+                  <div v-bind="secondaryRowAttrs">
+                    <template v-if="Array.isArray(value.secondaryRow)">
+                      <div v-for="(secondaryRow, idx) in value.secondaryRow" :key="idx">
+                        <span v-bind="secondaryRowEmptyAttrs">
+                          {{ secondaryRow }}
+                        </span>
+                      </div>
+                    </template>
+
+                    <template v-else>
+                      {{ value.secondaryRow }}
+                    </template>
+                  </div>
+                </template>
 
-                  <template v-else>
-                    {{ value.secondaryRow }}
-                  </template>
-                </div>
-              </template>
+                <template v-else>
+                  <div :data-cy="`${dataCy}-${key}-cell`">
+                    {{ value || HYPHEN_SYMBOL }}
+                  </div>
+                </template>
+              </UTableCell>
+            </tr>
 
-              <template v-else>
-                <div :data-cy="`${dataCy}-${key}-cell`">
-                  {{ value || emptyItem }}
-                </div>
-              </template>
-            </td>
-          </tr>
+            <tr v-if="rowIndex === lastRow" v-bind="afterLastRowAttrs">
+              <UTableCell
+                v-if="hasSlotContent(slots['after-last-row'])"
+                :compact="compact"
+                :colspan="colsCount"
+                v-bind="afterLastRowCellAttrs"
+              >
+                <!-- @slot Use it to add something after last row. -->
+                <slot name="after-last-row" />
+              </UTableCell>
+
+              <td v-else :colspan="colsCount" v-bind="afterLastRowCellAttrs" />
+            </tr>
+          </template>
+        </tbody>
 
-          <tr v-if="rowIndex === lastRow" :class="afterLastRowClass">
-            <td v-if="isShownSlot.afterLastRow" :colspan="colsCount">
-              <!-- @slot Use it to add something after last row. -->
-              <slot name="after-last-row" />
+        <tbody v-else>
+          <tr>
+            <td :colspan="colsCount">
+              <slot name="empty-table-msg">
+                <UEmpty
+                  size="sm"
+                  :description="emptyTableMsg"
+                  :data-cy="`${dataCy}-empty`"
+                  v-bind="emptyAttrs"
+                />
+              </slot>
             </td>
           </tr>
-        </template>
+        </tbody>
 
-        <template v-if="isExistSlot('tfoot')" #tfoot>
-          <tfoot class="table-footer">
-            <tr ref="footerRow" class="table-footer-row">
-              <td v-if="selectable" />
+        <tfoot v-if="hasSlotContent($slots['tfoot'])" v-bind="footerClassesAttrs">
+          <tr ref="footerRow" v-bind="footerRowAttrs">
+            <UTableCell v-if="selectable" :compact="compact" v-bind="footerCellAttrs" />
 
-              <!-- @slot Use it to add something in table footer. -->
-              <slot name="tfoot" :cols-count="colsCount" />
-            </tr>
+            <!-- @slot Use it to add something in table footer. -->
+            <slot name="tfoot" :cols-count="colsCount" />
+          </tr>
 
-            <tr ref="footerFixedRow" class="table-footer-fixed-row" :style="tableRowWidthStyle">
-              <td v-if="selectable" />
+          <tr ref="footerStickyRow" :style="tableRowWidthStyle" v-bind="footerStickyRowAttrs">
+            <UTableCell v-if="selectable" :compact="compact" v-bind="footerCellAttrs" />
 
-              <!-- @slot Use it to add something in table footer. -->
-              <slot name="tfoot" :cols-count="colsCount" />
-            </tr>
-          </tfoot>
-        </template>
-
-        <template v-if="!tableItems.length" #tbody>
-          <EmptyTableMsg :colspan="colsCount" :filters="filters" :i18n="i18n">
-            <slot name="empty-table-msg" />
-          </EmptyTableMsg>
-        </template>
-      </t-table>
+            <!-- @slot Use it to add something in table footer. -->
+            <slot name="tfoot" :cols-count="colsCount" />
+          </tr>
+        </tfoot>
+      </table>
     </div>
   </div>
 </template>
 
-<script>
-import DateServiceDefault from "vueless/service.date";
+<script setup>
+import {
+  ref,
+  computed,
+  watch,
+  useSlots,
+  onMounted,
+  onUpdated,
+  nextTick,
+  onBeforeUnmount,
+} from "vue";
 
-import { isSameDay, isValid, secondsToMilliseconds } from "date-fns";
-
-import UMoney from "vueless/ui.text-money";
-import UTag from "vueless/ui.text-tag";
-import ULink from "vueless/ui.button-link";
 import UCheckbox from "vueless/ui.form-checkbox";
-import UTopLoader from "vueless/layout-ui.loader-top";
-import TTable from "vueless/library.vue-tailwind-3/t-table";
-import TableCheckbox from "./components/TableCheckbox.vue";
-import EmptyTableMsg from "./components/EmptyTableMsg.vue";
-import DateSeparator from "./components/DateSeparator.vue";
-import I18nServiceDefault from "vueless/service.i18n";
-
-const ONE_REM = 16;
-const ONE_AND_HALF_REM = 1.5;
-
-export default {
-  name: "UTable",
-  components: {
-    UTag,
-    ULink,
-    UMoney,
-    UCheckbox,
-    UTopLoader,
-    TTable,
-    TableCheckbox,
-    EmptyTableMsg,
-    DateSeparator,
+import ULoaderTop from "@vueless/layouts/ui.loader-top";
+
+import I18nServiceDefault from "@vueless/services/i18n";
+import UIService from "vueless/service.ui";
+import defaultConfig from "./configs/default.config";
+import TableService from "./services/table.service";
+
+import { HYPHEN_SYMBOL, PX_IN_REM } from "vueless/service.ui";
+import { UTable } from "./constants";
+import { useAttrs } from "./composables/attrs.composable";
+
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "UTable", inheritAttrs: false });
+
+const props = defineProps({
+  /**
+   * Table columns.
+   */
+  columns: {
+    type: Array,
+    required: true,
   },
 
-  props: {
-    /**
-     * Set items (rows) for table.
-     */
-    items: {
-      type: Array,
-      default: () => [],
-      required: true,
-    },
-
-    /**
-     * Set headers for table.
-     */
-    headers: {
-      type: Array,
-      default: () => [],
-      required: true,
-    },
-
-    /**
-     * Set filters for table.
-     */
-    filters: {
-      type: Object,
-      default: () => ({}),
-    },
-
-    /**
-     * It allows selecting table rows.
-     */
-    selectable: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Makes the table more narrow.
-     */
-    compact: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Make footer fixed.
-     */
-    fixedFooter: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Make header sticky.
-     */
-    stickyHeader: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Set loader resource name to activate table top loader exact for that request.
-     */
-    loaderResourceName: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * Enable or disable nesting.
-     */
-    nesting: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Sets the nesting level from which folding button need to be shown.
-     */
-    nestingFromLevel: {
-      type: Number,
-      default: 0,
-    },
-
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
+  /**
+   * Table rows data.
+   */
+  rows: {
+    type: Array,
+    required: true,
   },
 
-  emits: ["clickRow", "update:items"],
-
-  setup() {
-    const { getTranslation } = new I18nServiceDefault();
+  /**
+   * Show/hide date divider or set label for specific date.
+   */
+  dateDivider: {
+    type: [Array, Boolean],
+    default: false,
+  },
 
-    return { getTranslation };
+  /**
+   * Enable selecting table rows.
+   */
+  selectable: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UTable).default.selectable,
   },
 
-  data: () => ({
-    selectAll: false,
-    canSelectAll: true,
-    selectedRows: [],
-    tableItems: [],
-    hiddenIds: [],
-    firstRow: 0,
-    emptyItem: "-",
-    tableWidth: 0,
-    tableHeight: 0,
-    pagePositionY: 0,
-  }),
-
-  computed: {
-    i18n() {
-      return {
-        noItems: this.getTranslation("noItems"),
-        noResultsForFilters: this.getTranslation("noResultsForFilters"),
-        yesterday: this.getTranslation("yesterday"),
-        today: this.getTranslation("today"),
-        tomorrow: this.getTranslation("tomorrow"),
-      };
-    },
-
-    tableWrapClass() {
-      const selected = this.selectedRowsLength ? "mono-table-inner-wrapper-selected" : "";
-      const compact = this.compact ? "mono-table-inner-wrapper-compact" : "";
-
-      return [selected, compact];
-    },
-
-    selectedRowsLength() {
-      return this.selectedRows.length;
-    },
-
-    isSelectedAllRows() {
-      return this.selectedRowsLength === this.tableItems.length;
-    },
-
-    colsCount() {
-      return this.headers.length + 1;
-    },
-
-    lastRow() {
-      return this.items.length - 1;
-    },
-
-    isShownSlot() {
-      return {
-        beforeFirstRow: !!this.$slots["before-first-row"],
-        afterLastRow: !!this.$slots["after-last-row"],
-      };
-    },
-
-    tableClasses() {
-      return {
-        "fixed-footer": this.isFixedFooter,
-      };
-    },
-
-    headerClasses() {
-      return {
-        compact: this.compact ? "compact-header" : "",
-        actionsHeader: this.selectedRowsLength ? "actions-header" : "",
-        fixedHeader: this.isFixedHeader && this.stickyHeader ? "mono-table-fixed-header" : "",
-        hideHeader: this.selectedRowsLength && !this.isFixedHeader ? "hide-header" : "",
-      };
-    },
-
-    isShownFixedOrActionsHeader() {
-      return this.isFixedHeader || this.selectedRowsLength;
-    },
-
-    isFixedFooter() {
-      const windowHeight = window.innerHeight;
-
-      return (
-        windowHeight < this.tableHeight &&
-        this.fixedFooter &&
-        !this.isShownFooterPosition &&
-        this.isCheckedMoreOneTableItems
-      );
-    },
-
-    isFixedHeader() {
-      return !this.isShownHeaderPosition;
-    },
-
-    isShownHeaderPosition() {
-      const positionForFixHeader =
-        this.$refs?.headerRow?.getBoundingClientRect().top + window.pageYOffset || 0;
-
-      return positionForFixHeader >= this.pagePositionY;
-    },
-
-    isShownFooterPosition() {
-      const windowHeight = window.innerHeight;
-      const pageBottom = this.pagePositionY + windowHeight;
-      const positionForFixFooter =
-        this.$refs?.footerRow?.getBoundingClientRect().bottom + window.pageYOffset;
-
-      return pageBottom >= positionForFixFooter;
-    },
-
-    isCheckedMoreOneTableItems() {
-      const checkedTableItems = this.tableItems.filter((item) => item.isChecked);
-
-      return checkedTableItems.length > 1;
-    },
-
-    tableRowWidthStyle() {
-      return `width: ${this.tableWidth / ONE_REM}rem`;
-    },
-
-    beforeFirstRowClass() {
-      return this.tableItems[0]?.isChecked ? "table-row-checked" : "";
-    },
-
-    firstRowClass() {
-      return this.hasContentBeforeFirstRowSlot ? "" : "first-row";
-    },
-
-    afterLastRowClass() {
-      return this.isSlotEmpty("after-last-row") ? "more-row-hide" : "more-row";
-    },
-
-    hasContentBeforeFirstRowSlot() {
-      return this.isShownSlot.beforeFirstRow
-        ? this.$slots["before-first-row"]()?.some((item) => !!item.type?.render)
-        : false;
-    },
+  /**
+   * Makes the table compact (fewer spacings).
+   */
+  compact: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UTable).default.compact,
   },
 
-  watch: {
-    selectAll: {
-      handler: "onChangeSelectAll",
-      deep: true,
-    },
-    selectedRows: {
-      handler: "onChangeSelectedRows",
-      deep: true,
-    },
-    tableItems: {
-      handler: "onChangeTableItems",
-      deep: true,
-    },
-    items: {
-      handler: "onChangeItems",
-      deep: true,
-    },
-    isFixedFooter: "onChangeFixedFooter",
-    isFixedHeader: "onChangeFixedHeader",
+  /**
+   * Set header sticky.
+   */
+  stickyHeader: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UTable).default.stickyHeader,
   },
 
-  created() {
-    this.tableItems = this.items;
+  /**
+   * Set footer sticky.
+   */
+  stickyFooter: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UTable).default.stickyFooter,
+  },
 
-    document.addEventListener("keyup", this.onKeyupClearCheckbox);
-    document.addEventListener("scroll", this.onScrollGetPosition, { passive: true });
+  /**
+   * Enable nesting rows.
+   */
+  nesting: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UTable).default.nesting,
   },
 
-  updated() {
-    this.tableHeight = this.$refs.tableWrapper.offsetHeight;
-    this.tableWidth = this.$refs.tableWrapper.offsetWidth;
+  /**
+   * Sets the nesting level from which folding button need to be shown.
+   */
+  nestingFrom: {
+    type: Number,
+    default: UIService.get(defaultConfig, UTable).default.nestingFrom,
   },
 
-  beforeUnmount() {
-    document.removeEventListener("keyup", this.onKeyupClearCheckbox);
-    document.removeEventListener("scroll", this.onScrollGetPosition);
+  /**
+   * Indicate if filters applied.
+   */
+  filters: {
+    type: Boolean,
+    default: false,
   },
 
-  methods: {
-    isShownIcon({ index, row }) {
-      const isChildren = row.childrenIds?.length > 0;
-      const isWithinNestingLevel = row.nestedLevel >= this.nestingFromLevel;
-
-      const isFirstRow = index === 0;
-
-      return isFirstRow && (isChildren || row.isNestingRow) && this.nesting && isWithinNestingLevel;
-    },
-
-    isIconActive(row) {
-      return !row.childrenIds?.length ? "gray" : "";
-    },
-
-    isSlotEmpty(slotName) {
-      return Boolean(this.$slots[slotName]);
-    },
-
-    onClickShowItem(row) {
-      if (!this.nesting || !row.childrenIds.length) return;
-      const [firstElement] = row.childrenIds;
-
-      row.isHidden = !row.isHidden;
-
-      if (row.isHidden && row.childrenIds.length) {
-        this.hiddenIds.push(...row.childrenIds);
-      } else {
-        this.hiddenIds =
-          row.nestedLevel === this.nestingFromLevel
-            ? row.childrenIds.filter((item) => !this.hiddenIds.includes(item))
-            : this.hiddenIds.filter((item) => item !== firstElement);
-      }
-    },
-
-    tableContainerClass(index) {
-      return index === 0 && this.nesting ? "table-container" : "";
-    },
-
-    setLeftMargin(nestedLevel) {
-      return `margin-left: ${nestedLevel * ONE_AND_HALF_REM}rem`;
-    },
-
-    isShownRow(row) {
-      if (this.hiddenIds.includes(row.id)) {
-        row.isHidden = true;
-      }
-
-      return this.hiddenIds.includes(row.id);
-    },
-
-    onChangeFixedFooter() {
-      if (this.isFixedFooter) {
-        this.$nextTick(() => {
-          this.setFooterItemsWidth();
-        });
-      } else {
-        this.setFooterItemsWidth(true);
-      }
-    },
-
-    setFooterItemsWidth(setNullWidth) {
-      const ZERO_WIDTH = 0;
-
-      if (!this.fixedFooter) return;
-
-      const [...mainFooterItems] = this.$refs.footerRow.children;
-      const [...fixedFooterItems] = this.$refs.footerFixedRow.children;
-
-      fixedFooterItems.forEach((item, index) => {
-        item.style.width = setNullWidth
-          ? `${ZERO_WIDTH}rem`
-          : `${mainFooterItems[index].offsetWidth / ONE_REM}rem`;
-      });
-    },
-
-    onChangeFixedHeader() {
-      this.setHeaderItemsWidth();
-    },
-
-    setHeaderItemsWidth() {
-      if (!this.selectedRowsLength) {
-        const [...mainHeaderItems] = this.$refs.headerRow.children;
-        const [...fixedHeaderItems] = this.$refs.headerFixedRow.children;
-
-        fixedHeaderItems.forEach((item, index) => {
-          item.style.width = `${mainHeaderItems[index]?.offsetWidth / ONE_REM}rem`;
-        });
-      }
-    },
-
-    onScrollGetPosition() {
-      this.pagePositionY = window.pageYOffset;
-    },
-
-    onChangeTableItems(tableItems) {
-      this.$emit("update:items", tableItems);
-    },
-
-    onKeyupClearCheckbox(event) {
-      const escKeyCode = 27;
-
-      if (event.keyCode === escKeyCode && this.selectable) {
-        this.selectedRows = [];
-      }
-    },
-
-    onChangeItems() {
-      if (!this.items.length || this.tableItems.length !== this.items.length) {
-        this.selectedRows = [];
-      }
-
-      const checkedTableItems = this.tableItems.filter((item) => item.isChecked);
-
-      this.tableItems = this.items;
-
-      this.tableItems.forEach((item) => {
-        checkedTableItems.forEach((checkedItem) => {
-          if (item.id === checkedItem.id) {
-            item.isChecked = true;
-          }
-        });
-
-        if (this.nesting && item.isHidden && item.childrenIds?.length) {
-          this.hiddenIds.push(...item.childrenIds);
-        }
-      });
-    },
-
-    isShownDateSeparator(rowIndex, date) {
-      const prevIndex = rowIndex ? rowIndex - 1 : rowIndex;
-      const prevItem = this.tableItems[prevIndex];
-      const prevDateInMilliseconds = secondsToMilliseconds(prevItem?.date?.primaryRow);
-      const dateInMilliseconds = secondsToMilliseconds(date?.primaryRow);
-      const isSameDate = isSameDay(dateInMilliseconds, prevDateInMilliseconds);
-
-      if (rowIndex === 0) {
-        return isValid(prevDateInMilliseconds) && this.hasContentBeforeFirstRowSlot;
-      }
-
-      return isValid(prevDateInMilliseconds) && !isSameDate;
-    },
-
-    rowClass(row) {
-      return row.isChecked ? "table-row-checked" : "";
-    },
-
-    dateSeparatorRowClass(rowIndex) {
-      const isCheckedRowBefore = this.tableItems[rowIndex - 1]?.isChecked;
-      const isCheckedRowAfter = this.tableItems[rowIndex]?.isChecked;
-
-      return (isCheckedRowBefore && isCheckedRowAfter) || (rowIndex === 0 && isCheckedRowAfter)
-        ? "table-row-checked"
-        : "";
-    },
-
-    onClickSelectRow(rowIndex) {
-      const isRowChecked = this.tableItems[rowIndex].isChecked;
-
-      this.tableItems[rowIndex].isChecked = !isRowChecked;
-    },
-
-    getFilteredRow(row) {
-      const filteredRow = Object.entries(row).filter((col) => {
-        const [key] = col;
-        const isShownCol = this.headers.some((header) => header.value === key);
-
-        if (isShownCol) return col;
-      });
-
-      return Object.fromEntries(filteredRow);
-    },
-
-    onClickRow(row) {
-      this.$emit("clickRow", row);
-    },
-
-    isExistSlot(slotName) {
-      return !!this.$slots[slotName];
-    },
-
-    getTdClass(key) {
-      return this.headers.find((item) => item.value === key)?.tdClass;
-    },
-
-    onChangeSelectAll(selectAll) {
-      if (selectAll && this.canSelectAll) {
-        this.selectedRows = this.tableItems.map((item, index) => index);
-
-        this.tableItems.forEach((item) => {
-          item.isChecked = true;
-        });
-      } else if (!selectAll) {
-        this.selectedRows = [];
-
-        this.tableItems.forEach((item) => {
-          item.isChecked = false;
-        });
-      }
-
-      this.canSelectAll = true;
-    },
-
-    onChangeSelectedRows(selectedRows) {
-      if (selectedRows.length) {
-        this.canSelectAll = false;
-
-        this.isCheckedMoreOneTableItems ? this.setFooterItemsWidth() : "";
-      } else {
-        this.$nextTick(() => {
-          this.setHeaderItemsWidth();
-        });
-      }
-
-      this.selectAll = !!selectedRows.length;
-    },
-
-    dateConverter(value, format) {
-      return new DateServiceDefault().dateConverter(value, format);
-    },
-
-    clearSelectedItems() {
-      this.selectedRows = [];
-    },
+  /**
+   * Set loader resource name to activate table top loader exact for that resource.
+   */
+  resource: {
+    type: String,
+    default: "",
   },
-};
-</script>
 
-<i18n>
-en:
-  noItems: There is no data in the table yet.
-  noResultsForFilters: No results were found for the specified filters.
-  yesterday: Yesterday
-  today: Today
-  tomorrow: Tomorrow
-ru:
-  noItems: Пока что в таблице нет данных.
-  noResultsForFilters: По заданным фильтрам ничего не найдено.
-  yesterday: Вчера
-  today: Сегодня
-  tomorrow: Завтра
-ua:
-  noItems: Поки що в таблиці немає даних.
-  noResultsForFilters: За даними фільтрами нічого не знайдено.
-  yesterday: Вчора
-  today: Сьогодні
-  tomorrow: Завтра
-</i18n>
+  /**
+   * Component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
 
-<style lang="postcss" scoped>
-.mono-table-wrapper {
-  @apply relative bg-white rounded-2xl;
+  /**
+   * Data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
+
+const emit = defineEmits(["clickRow", "update:rows"]);
+
+defineExpose({ clearSelectedItems });
+
+const { getTranslation } = new I18nServiceDefault();
+const slots = useSlots();
+
+const selectAll = ref(false);
+const canSelectAll = ref(true);
+const selectedRows = ref([]);
+const tableRows = ref([]);
+const hiddenIds = ref([]);
+const firstRow = ref(0);
+const tableWidth = ref(0);
+const tableHeight = ref(0);
+const pagePositionY = ref(0);
+
+const headerRow = ref(null);
+const footerRow = ref(null);
+const tableWrapper = ref(null);
+const footerStickyRow = ref(null);
+const headerStickyRow = ref(null);
+
+const isHeaderSticky = computed(() => {
+  return !isShownHeaderPosition.value;
+});
+
+const isFooterSticky = computed(
+  () =>
+    window.innerHeight < tableHeight.value &&
+    props.stickyFooter &&
+    !isShownFooterPosition.value &&
+    isCheckedMoreOneTableItems.value,
+);
+
+const {
+  config,
+  wrapperAttrs,
+  customHeaderItemAttrs,
+  customHeaderAttrs,
+  tableWrapperAttrs,
+  headerRowCellAttrs,
+  afterLastRowAttrs,
+  afterLastRowCellAttrs,
+  beforeFirstRowAttrs,
+  beforeFirstRowCellAttrs,
+  bodyRowAttrs,
+  footerClassesAttrs,
+  dateSeparatorRowAttrs,
+  toggleButtonWrapperAttrs,
+  headerCellAttrs,
+  bodyCellAttrs,
+  checkboxBodyWrapperCellAttrs,
+  footerCellAttrs,
+  selectAllCheckboxAttrs,
+  headerSelectAllCheckboxAttrs,
+  tableCheckboxAttrs,
+  collapseIconAttrs,
+  expandIconAttrs,
+  emptyAttrs,
+  dateSeparatorAttrs,
+  selectedRowsCountAttrs,
+  headerStickyLoaderAttrs,
+  tableAttrs,
+  headerRowAttrs,
+  tableLoaderAttrs,
+  bodyAttrs,
+  toggleItemButtonAttrs,
+  secondaryRowAttrs,
+  secondaryRowEmptyAttrs,
+  footerRowAttrs,
+  footerStickyRowAttrs,
+  hasSlotContent,
+  headerAttrs,
+} = useAttrs(props, { selectedRows, isHeaderSticky, tableRows, isFooterSticky });
+
+const i18n = computed(() => ({
+  noItems: getTranslation("noItems"),
+  noResultsForFilters: getTranslation("noResultsForFilters"),
+  yesterday: getTranslation("yesterday"),
+  today: getTranslation("today"),
+  tomorrow: getTranslation("tomorrow"),
+}));
+
+const normalizedColumns = computed(() => TableService.normalizeColumns(props.columns));
+
+const isSelectedAllRows = computed(() => {
+  return selectedRows.value.length === tableRows.value.length;
+});
+
+const colsCount = computed(() => {
+  return props.columns.length + 1;
+});
+
+const lastRow = computed(() => {
+  return props.rows.length - 1;
+});
+
+const isShownStickyOrActionsHeader = computed(() => {
+  return isHeaderSticky.value || selectedRows.value.length;
+});
+
+const isShownHeaderPosition = computed(() => {
+  const positionForFixHeader = headerRow.value?.getBoundingClientRect().top + window.scrollY || 0;
+
+  return positionForFixHeader >= pagePositionY.value;
+});
+
+const isShownFooterPosition = computed(() => {
+  const pageBottom = pagePositionY.value + window.innerHeight;
+  const positionForFixFooter = footerRow.value?.getBoundingClientRect().bottom + window.scrollY;
+
+  return pageBottom >= positionForFixFooter;
+});
+
+const isCheckedMoreOneTableItems = computed(() => {
+  return tableRows.value.filter((item) => item.isChecked).length > 1;
+});
+
+const tableRowWidthStyle = computed(() => ({ width: `${tableWidth.value / PX_IN_REM}rem` }));
+
+const hasContentBeforeFirstRowSlot = computed(() => {
+  return hasSlotContent(slots["before-first-row"])
+    ? slots["before-first-row"]()?.some((item) => !!item.type?.render)
+    : false;
+});
+
+const emptyTableMsg = computed(() => {
+  return props.filters ? i18n.value.noResultsForFilters : i18n.value.noItems;
+});
+
+watch(selectAll, onChangeSelectAll, { deep: true });
+watch(selectedRows, onChangeSelectedRows, { deep: true });
+watch(tableRows, () => emit("update:rows", tableRows), { deep: true });
+watch(() => tableRows.value.length, updateSelectedRows);
+watch(() => props.rows, synchronizeTableItemsWithProps, { deep: true });
+watch(isHeaderSticky, setHeaderItemsWidth);
+watch(isFooterSticky, (newValue) =>
+  newValue ? nextTick(setFooterItemsWidth) : setFooterItemsWidth(true),
+);
+
+tableRows.value = props.rows;
+
+onMounted(() => {
+  document.addEventListener("keyup", onKeyupClearCheckbox);
+  document.addEventListener("scroll", onScrollGetPosition, { passive: true });
+  window.addEventListener("resize", onWindowResizeSetWidth);
+});
+
+onUpdated(() => {
+  tableHeight.value = tableWrapper.value?.offsetHeight;
+  tableWidth.value = tableWrapper.value?.offsetWidth;
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener("keyup", onKeyupClearCheckbox);
+  document.removeEventListener("scroll", onScrollGetPosition);
+  window.removeEventListener("resize", onWindowResizeSetWidth);
+});
+
+function onWindowResizeSetWidth() {
+  tableWidth.value = tableWrapper.value.offsetWidth;
+
+  setHeaderItemsWidth();
+  setFooterItemsWidth();
 }
 
-.more-row {
-  .first-row {
-    @apply py-1 !important;
-  }
-
-  .last-row {
-    @apply py-1 !important;
-  }
-
-  td {
-    @apply px-0 py-4 !important;
+function isShownIcon({ index, row }) {
+  const isChildren = row.childrenIds?.length > 0;
+  const isWithinNestingLevel = row.nestedLevel >= props.nestingFrom;
 
-    & :deep(:first-child) {
-      @apply mx-auto;
-    }
-  }
+  const isFirstRow = index === 0;
 
-  &-hide {
-    td {
-      @apply !p-0;
-    }
-  }
+  return isFirstRow && (isChildren || row.isNestingRow) && props.nesting && isWithinNestingLevel;
 }
 
-.mono-table-fixed-header {
-  @apply fixed top-0 border border-t-0 border-gray-200;
-  @apply bg-white;
-
-  &.actions-header {
-    @apply rounded-t-none;
-  }
+function isIconActive(row) {
+  return !row.childrenIds?.length ? "grayscale" : "";
 }
 
-.actions-header {
-  @apply rounded-t-lg border border-blue-200 bg-blue-50;
+function onClickShowItem(row) {
+  if (!props.nesting || !row.childrenIds.length) return;
+  const [firstElement] = row.childrenIds;
 
-  .selected-rows-count {
-    @apply flex items-center pr-4;
-    @apply font-medium text-gray-900;
+  row.isHidden = !row.isHidden;
+
+  if (row.isHidden && row.childrenIds.length) {
+    hiddenIds.value.push(...row.childrenIds);
+  } else {
+    hiddenIds.value =
+      row.nestedLevel === props.nestingFromLevel
+        ? row.childrenIds.filter((item) => !hiddenIds.value.includes(item))
+        : hiddenIds.value.filter((item) => item !== firstElement);
   }
 }
 
-.mono-table-custom-header {
-  @apply flex items-center;
-  @apply z-40;
-
-  &-item {
-    @apply flex-none;
-    @apply text-sm font-normal text-gray-500;
-    @apply px-[1.125rem] py-5;
-
-    &:first-child {
-      @apply p-5;
-    }
+function getDateSeparatorLabel(separatorDate) {
+  return Array.isArray(props.dateDivider)
+    ? props.dateDivider.find((dateItem) => dateItem.date === separatorDate)?.label || separatorDate
+    : separatorDate;
+}
 
-    &:nth-child(2) {
-      @apply pl-0;
-    }
+function setLeftMargin(nestedLevel) {
+  return { marginLeft: `${nestedLevel * 1.5}rem` };
+}
 
-    &:last-child {
-      @apply p-5;
-    }
+function isShownRow(row) {
+  if (hiddenIds.value.includes(row.id)) {
+    row.isHidden = true;
   }
 
-  &.compact-header {
-    .fixed-header-table-loader {
-      @apply !top-[3.25rem];
-    }
-
-    .mono-table-custom-header-item {
-      @apply p-4;
-
-      &:nth-child(2) {
-        @apply pl-0;
-      }
-    }
-  }
+  return hiddenIds.value.includes(row.id);
 }
 
-.mono-table-inner-wrapper {
-  @apply overflow-auto rounded-lg;
-  @apply border border-gray-200;
-
-  &-selected {
-    @apply !rounded-t-none border-t-0;
-  }
+function setFooterItemsWidth(setNullWidth) {
+  const ZERO_WIDTH = 0;
 
-  .mono-table {
-    @apply min-w-full border-none bg-white text-sm;
-    @apply w-full;
+  if (!props.stickyFooter) return;
 
-    :deep(thead) {
-      @apply border-b border-solid border-gray-200;
+  const mainFooterItems = [...footerRow.value.children];
+  const stickyFooterItems = [...footerStickyRow.value.children];
 
-      tr {
-        th {
-          @apply bg-white px-[1.125rem] py-5;
-          @apply text-sm font-normal text-gray-500;
+  stickyFooterItems.forEach((item, index) => {
+    item.style.width = setNullWidth
+      ? `${ZERO_WIDTH}rem`
+      : `${mainFooterItems[index].offsetWidth / PX_IN_REM}rem`;
+  });
+}
 
-          &:first-child,
-          &:last-child {
-            @apply p-5;
-          }
+function setHeaderItemsWidth() {
+  if (selectedRows.value.length) return;
 
-          &:nth-child(2) {
-            @apply pl-0;
-          }
-        }
-      }
-    }
+  const mainHeaderItems = [...(headerRow.value?.children || [])];
+  const stickyHeaderItems = [...(headerStickyRow.value?.children || [])];
 
-    :deep(tbody) {
-      @apply divide-none;
+  stickyHeaderItems.forEach((item, index) => {
+    item.style.width = `${mainHeaderItems[index]?.offsetWidth / PX_IN_REM}rem`;
+  });
+}
 
-      tr {
-        td {
-          @apply text-ellipsis whitespace-nowrap p-[1.125rem] py-5;
-          @apply align-top;
+function onScrollGetPosition() {
+  pagePositionY.value = window.scrollY;
+}
 
-          &:first-child,
-          &:last-child {
-            @apply p-5;
-          }
+function onKeyupClearCheckbox(event) {
+  const escKeyCode = 27;
 
-          &:nth-child(2) {
-            @apply pl-0;
-          }
+  if (event.keyCode === escKeyCode && props.selectable) {
+    selectedRows.value = [];
+  }
+}
 
-          .tags-cell {
-            @apply flex space-x-2;
-          }
-        }
-      }
-    }
+function synchronizeTableItemsWithProps() {
+  if (!props.rows.length || props.rows.length !== tableRows.value.length) {
+    selectedRows.value = [];
+  }
 
-    :deep(tfoot) {
-      @apply border-t border-solid border-gray-200;
+  tableRows.value = props.rows;
 
-      tr {
-        td {
-          @apply p-[1.125rem] py-5;
+  tableRows.value.forEach((item) => {
+    if (props.nesting && item.isHidden && item.childrenIds?.length) {
+      hiddenIds.value.push(...item.childrenIds);
+    }
+  });
+}
 
-          &:first-child {
-            @apply p-5;
-          }
+function updateSelectedRows() {
+  selectedRows.value = tableRows.value.filter((row) => row.isChecked).map((row) => row.id);
+}
 
-          &:nth-child(2) {
-            @apply pl-0;
-          }
-        }
-      }
-    }
+function isShownDateSeparator(rowIndex) {
+  const prevIndex = rowIndex ? rowIndex - 1 : rowIndex;
+  const nextIndex = rowIndex ? rowIndex + 1 : rowIndex;
+  const prevItem = tableRows.value[prevIndex];
+  const nextItem = tableRows.value[nextIndex];
+  const currentItem = tableRows.value[rowIndex];
 
-    :deep(.secondary-row) {
-      @apply mt-1 text-xs text-gray-500;
-    }
+  if (rowIndex === 0) {
+    return hasContentBeforeFirstRowSlot.value;
   }
 
-  &-compact {
-    .mono-table {
-      :deep(thead) {
-        tr {
-          th {
-            @apply bg-white p-4;
-
-            &:first-child,
-            &:last-child {
-              @apply p-4;
-            }
-          }
-        }
-      }
-
-      :deep(tbody) {
-        tr {
-          td {
-            @apply px-4 py-3;
-
-            &:first-child,
-            &:last-child {
-              @apply px-4 py-3;
-            }
-          }
-        }
-      }
-
-      :deep(tfoot) {
-        tr {
-          td {
-            @apply p-4;
-
-            &:first-child {
-              @apply p-4;
-            }
-          }
-        }
-      }
-    }
-  }
+  const isPrevSameDate = prevItem?.date?.primaryRow === currentItem?.date?.primaryRow;
+  const isNextSameDate = nextItem?.date?.primaryRow === currentItem?.date?.primaryRow;
+
+  return isPrevSameDate && !isNextSameDate && props.dateDivider;
 }
 
-.col-checkbox {
-  @apply w-[3.75rem];
+function rowClass(row) {
+  return selectedRows.value.includes(row.id) ? config.value.checkedRow : "";
 }
 
-.table-row {
-  @apply transition duration-100;
-  @apply hover:bg-gray-50;
+function onClickSelectRow(rowId) {
+  const targetRowIndex = tableRows.value.findIndex((row) => row.id === rowId);
 
-  &-checked {
-    @apply transition duration-100;
-    @apply bg-gray-100;
-  }
+  tableRows.value[targetRowIndex].isChecked = !tableRows.value[targetRowIndex].isChecked;
 }
 
-.table-button {
-  @apply flex relative -top-px;
+function onClickRow(row) {
+  emit("clickRow", row);
 }
 
-.children-empty {
-  @apply inline-block;
+function getTdClass(key) {
+  return props.columns.find((column) => column.key === key)?.tdClass;
 }
 
-.fixed-footer {
-  .table {
-    &-footer {
-      @apply relative;
+function onChangeSelectAll(selectAll) {
+  if (selectAll && canSelectAll.value) {
+    selectedRows.value = tableRows.value.map((item) => item.id);
 
-      &-fixed-row {
-        visibility: inherit;
-      }
-    }
+    tableRows.value.forEach((item) => (item.isChecked = true));
+  } else if (!selectAll) {
+    selectedRows.value = [];
+
+    tableRows.value.forEach((item) => (item.isChecked = false));
   }
-}
 
-.hide-header {
-  @apply relative -top-[3.75rem];
-  visibility: collapse;
+  canSelectAll.value = true;
 }
 
-.table-footer-fixed-row {
-  @apply fixed bottom-0 -ml-px;
-  @apply border border-b-0 border-gray-200 bg-white;
-  visibility: collapse;
-}
+function onChangeSelectedRows(selectedRows) {
+  if (selectedRows.length) {
+    canSelectAll.value = false;
 
-.table-loader {
-  @apply !top-auto;
-}
-
-.table-fixed-loader {
-  @apply !top-[3.25rem];
-}
+    isCheckedMoreOneTableItems.value ? setFooterItemsWidth() : "";
+  } else {
+    nextTick(setHeaderItemsWidth);
+  }
 
-.fixed-header-table-loader {
-  @apply !top-[3.75rem];
+  selectAll.value = !!selectedRows.length;
 }
 
-.table-checkbox {
-  @apply w-[3.75rem];
+function clearSelectedItems() {
+  selectedRows.value = [];
 }
-.table-container {
-  @apply flex items-center;
+</script>
 
-  &-icon {
-    @apply mr-2 rounded-sm bg-gray-200;
-  }
-}
-</style>
+<i18n>
+en:
+  noItems: There is no data in the table yet.
+  noResultsForFilters: No results were found for the specified filters.
+ru:
+  noItems: Пока что в таблице нет данных.
+  noResultsForFilters: По заданным фильтрам ничего не найдено.
+ua:
+  noItems: Поки що в таблиці немає даних.
+  noResultsForFilters: За даними фільтрами нічого не знайдено.
+</i18n>