From b0a0d146483923e4b556adb6ccbbc5c2a32c0a25 Mon Sep 17 00:00:00 2001
From: RDMStreet <RDMStreetOne@gmail.com>
Date: Thu, 22 Apr 2021 12:00:01 +0300
Subject: [PATCH 1/4] UNK-659 Implement hierarchical table

---
 src/components/Table/SHierarchicalTable.vue   | 76 +++++++++++++++++++
 src/components/Table/STable.vue               |  9 +++
 src/components/Table/STableColumn.vue         |  2 +-
 src/components/Table/index.ts                 |  2 +
 src/components/index.ts                       |  3 +-
 src/index.ts                                  |  3 +
 .../Table/SHierarchicalTable.stories.ts       | 60 +++++++++++++++
 src/types/components.ts                       |  1 +
 8 files changed, 154 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Table/SHierarchicalTable.vue
 create mode 100644 src/stories/Table/SHierarchicalTable.stories.ts

diff --git a/src/components/Table/SHierarchicalTable.vue b/src/components/Table/SHierarchicalTable.vue
new file mode 100644
index 00000000..cb9d2210
--- /dev/null
+++ b/src/components/Table/SHierarchicalTable.vue
@@ -0,0 +1,76 @@
+<template>
+  <div class="s-hierarchical-table">
+    <s-table
+      class="s-hierarchical-table-level"
+      v-for="(level, levelIndex) in data"
+      :key="level.name"
+      :data="level.content"
+      :size="computedSize"
+      @select="handleSelect"
+      @select-all="handleSelectAll"
+    >
+      <s-table-column
+        v-if="levelIndex === (data.length - 1)"
+        type="selection"
+      />
+      <s-table-column
+        prop="value"
+        :label="level.label"
+      >
+        <template slot-scope="{ row }">
+          <slot
+            :name="level.name"
+            :data="{ name: level.name, value: row }"
+          >
+            {{ row }}
+          </slot>
+        </template>
+      </s-table-column>
+    </s-table>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Provide, Mixins } from 'vue-property-decorator'
+
+import SizeMixin from '../../mixins/SizeMixin'
+import STable from './STable.vue'
+import STableColumn from './STableColumn.vue'
+
+@Component({
+  components: {
+    STable,
+    STableColumn
+  }
+})
+export default class SHierarchicalTable extends Mixins(SizeMixin) {
+  /**
+   * Data of the table.
+   *
+   * By default it's set to an empty array
+   */
+  @Prop({ default: () => [], type: Array }) readonly data!: Array<any>
+
+  handleSelect (selection: Array<any>, row: any): void {
+    this.$emit('select', selection, row)
+  }
+
+  handleSelectAll (selection: Array<any>): void {
+    this.$emit('select-all', selection)
+  }
+
+  @Provide('sHierarchicalTable') sHierarchicalTable = this
+}
+</script>
+
+<style lang="scss" scoped>
+.s-hierarchical-table {
+  display: flex;
+  width: 100%;
+  background: var(--s-color-base-background);
+  &-level:not(:last-child) {
+    margin-right: 16px;
+    border-right: 1px solid var(--s-color-base-border-primary)
+  }
+}
+</style>
diff --git a/src/components/Table/STable.vue b/src/components/Table/STable.vue
index b240df43..fc249316 100644
--- a/src/components/Table/STable.vue
+++ b/src/components/Table/STable.vue
@@ -1,5 +1,6 @@
 <template>
   <el-table
+    :class="computedClasses"
     ref="table"
     :data="data"
     :height="height"
@@ -360,6 +361,14 @@ export default class STable extends Mixins(SizeMixin) {
     this.table.sort(prop, order)
   }
 
+  get computedClasses (): Array<string> {
+    const cssClasses: Array<string> = []
+    if (this.isStandardSize) {
+      cssClasses.push(`s-${this.size}`)
+    }
+    return cssClasses
+  }
+
   @Provide('sTable') sTable = this
 }
 </script>
diff --git a/src/components/Table/STableColumn.vue b/src/components/Table/STableColumn.vue
index 4b801d4e..715eaa05 100644
--- a/src/components/Table/STableColumn.vue
+++ b/src/components/Table/STableColumn.vue
@@ -34,7 +34,7 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Prop, Ref, Inject } from 'vue-property-decorator'
+import { Vue, Component, Prop, Inject } from 'vue-property-decorator'
 
 import { Size } from '@/types'
 
diff --git a/src/components/Table/index.ts b/src/components/Table/index.ts
index 1c87173f..402c3c3c 100644
--- a/src/components/Table/index.ts
+++ b/src/components/Table/index.ts
@@ -1,9 +1,11 @@
 import STable from './STable.vue'
+import SHierarchicalTable from './SHierarchicalTable.vue'
 import STableColumn from './STableColumn.vue'
 import { ColumnAlignment, ColumnFixedPosition, ColumnType, SortDirection } from './consts'
 
 export {
   STable,
+  SHierarchicalTable,
   STableColumn,
   ColumnAlignment,
   ColumnFixedPosition,
diff --git a/src/components/index.ts b/src/components/index.ts
index 5f53bb5a..ec7cbf6d 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -30,7 +30,7 @@ import { SRow } from './Layout/Row'
 import { SScrollSectionItem, SScrollSections } from './ScrollSections'
 import { SSelect, SOption, SOptionGroup } from './Select'
 import { STab, STabs } from './Tab'
-import { STable, STableColumn } from './Table'
+import { STable, SHierarchicalTable, STableColumn } from './Table'
 import { STooltip } from './Tooltip'
 
 export {
@@ -78,6 +78,7 @@ export {
   STab,
   STabs,
   STable,
+  SHierarchicalTable,
   STableColumn,
   STooltip
 }
diff --git a/src/index.ts b/src/index.ts
index 21cf9d37..8f4cf815 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -45,6 +45,7 @@ import {
   STab,
   STabs,
   STable,
+  SHierarchicalTable,
   STableColumn,
   STooltip
 } from './components'
@@ -101,6 +102,7 @@ const components = [
   { component: STab, name: Components.STab },
   { component: STabs, name: Components.STabs },
   { component: STable, name: Components.STable },
+  { component: SHierarchicalTable, name: Components.SHierarchicalTable },
   { component: STableColumn, name: Components.STableColumn },
   { component: STooltip, name: Components.STooltip }
 ]
@@ -177,6 +179,7 @@ export {
   STab,
   STabs,
   STable,
+  SHierarchicalTable,
   STableColumn,
   STooltip,
   SDialogMixin
diff --git a/src/stories/Table/SHierarchicalTable.stories.ts b/src/stories/Table/SHierarchicalTable.stories.ts
new file mode 100644
index 00000000..30256af4
--- /dev/null
+++ b/src/stories/Table/SHierarchicalTable.stories.ts
@@ -0,0 +1,60 @@
+import { withKnobs } from '@storybook/addon-knobs'
+
+import { SHierarchicalTable } from '../../components'
+
+export default {
+  component: SHierarchicalTable,
+  title: 'Design System/Components/Table/Hierarchical Table',
+  decorators: [withKnobs],
+  excludeStories: /.*Data$/
+}
+
+export const tableData = [
+  {
+    name: 'id',
+    label: 'ID',
+    content: [
+      'id-1',
+      'id-2',
+      'id-3',
+      'id-4',
+      'id-5'
+    ]
+  },
+  {
+    name: 'date',
+    label: 'Date',
+    content: [
+      '01.01.1970',
+      '02.01.1970',
+      '03.01.1970',
+      '04.01.1970',
+      '05.01.1970'
+    ]
+  },
+  {
+    name: 'file',
+    label: 'File',
+    content: [
+      'file-1.txt',
+      'file-2.txt',
+      'file-3.txt',
+      'file-4.txt',
+      'file-5.txt'
+    ]
+  }
+]
+
+export const configurable = () => ({
+  components: { SHierarchicalTable },
+  template: `<s-hierarchical-table
+               :data="tableData"
+             >
+               <template slot="date" slot-scope="{ value }">
+                 {{ value }} - test
+               </template>
+             </s-hierarchical-table>`,
+  data: () => ({
+    tableData: tableData
+  })
+})
diff --git a/src/types/components.ts b/src/types/components.ts
index 1b2d8d2e..6be5fd3d 100644
--- a/src/types/components.ts
+++ b/src/types/components.ts
@@ -43,6 +43,7 @@ export enum Components {
   STab = 'STab',
   STabs = 'STabs',
   STable = 'STable',
+  SHierarchicalTable = 'SHierarchicalTable',
   STableColumn = 'STableColumn',
   STooltip = 'STooltip'
 }

From b2cf7d3f90342c7976287ce22b22ea3e1de00f7a Mon Sep 17 00:00:00 2001
From: RDMStreet <RDMStreetOne@gmail.com>
Date: Tue, 4 May 2021 12:42:56 +0300
Subject: [PATCH 2/4] Some improvements

---
 src/components/Table/SHierarchicalTable.vue   | 159 +++----
 src/components/Table/STableColumn.vue         | 412 +++++++++---------
 .../Table/SHierarchicalTable.stories.ts       | 127 +++---
 3 files changed, 355 insertions(+), 343 deletions(-)

diff --git a/src/components/Table/SHierarchicalTable.vue b/src/components/Table/SHierarchicalTable.vue
index cb9d2210..6d49bd26 100644
--- a/src/components/Table/SHierarchicalTable.vue
+++ b/src/components/Table/SHierarchicalTable.vue
@@ -1,76 +1,83 @@
-<template>
-  <div class="s-hierarchical-table">
-    <s-table
-      class="s-hierarchical-table-level"
-      v-for="(level, levelIndex) in data"
-      :key="level.name"
-      :data="level.content"
-      :size="computedSize"
-      @select="handleSelect"
-      @select-all="handleSelectAll"
-    >
-      <s-table-column
-        v-if="levelIndex === (data.length - 1)"
-        type="selection"
-      />
-      <s-table-column
-        prop="value"
-        :label="level.label"
-      >
-        <template slot-scope="{ row }">
-          <slot
-            :name="level.name"
-            :data="{ name: level.name, value: row }"
-          >
-            {{ row }}
-          </slot>
-        </template>
-      </s-table-column>
-    </s-table>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Prop, Provide, Mixins } from 'vue-property-decorator'
-
-import SizeMixin from '../../mixins/SizeMixin'
-import STable from './STable.vue'
-import STableColumn from './STableColumn.vue'
-
-@Component({
-  components: {
-    STable,
-    STableColumn
-  }
-})
-export default class SHierarchicalTable extends Mixins(SizeMixin) {
-  /**
-   * Data of the table.
-   *
-   * By default it's set to an empty array
-   */
-  @Prop({ default: () => [], type: Array }) readonly data!: Array<any>
-
-  handleSelect (selection: Array<any>, row: any): void {
-    this.$emit('select', selection, row)
-  }
-
-  handleSelectAll (selection: Array<any>): void {
-    this.$emit('select-all', selection)
-  }
-
-  @Provide('sHierarchicalTable') sHierarchicalTable = this
-}
-</script>
-
-<style lang="scss" scoped>
-.s-hierarchical-table {
-  display: flex;
-  width: 100%;
-  background: var(--s-color-base-background);
-  &-level:not(:last-child) {
-    margin-right: 16px;
-    border-right: 1px solid var(--s-color-base-border-primary)
-  }
-}
-</style>
+<template>
+  <div class="s-hierarchical-table">
+    <s-table
+      class="s-hierarchical-table-level"
+      v-for="(level, levelIndex) in data"
+      :key="level.name"
+      :data="level.content"
+      :size="computedSize"
+      :border="false"
+      @select="levelIndex === (data.length - 1) ? handleSelect : null"
+      @select-all="levelIndex === (data.length - 1) ? handleSelectAll : null"
+      @selection-change="levelIndex === (data.length - 1) ? handleSelectionChange : null"
+      @row-click="row => $emit('row-click', row, level)"
+    >
+      <s-table-column
+        v-if="levelIndex === (data.length - 1)"
+        type="selection"
+      />
+      <s-table-column
+        prop="value"
+        :label="level.label"
+      >
+        <template slot-scope="{ row }">
+          <slot
+            :name="level.name"
+            :value="row"
+          >
+            {{ row }}
+          </slot>
+        </template>
+      </s-table-column>
+    </s-table>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Provide, Mixins } from 'vue-property-decorator'
+
+import SizeMixin from '../../mixins/SizeMixin'
+import STable from './STable.vue'
+import STableColumn from './STableColumn.vue'
+
+@Component({
+  components: {
+    STable,
+    STableColumn
+  }
+})
+export default class SHierarchicalTable extends Mixins(SizeMixin) {
+  /**
+   * Data of the table.
+   *
+   * By default it's set to an empty array
+   */
+  @Prop({ default: () => [], type: Array }) readonly data!: Array<any>
+
+  handleSelect (selection: Array<any>, row: any): void {
+    this.$emit('select', selection, row)
+  }
+
+  handleSelectAll (selection: Array<any>): void {
+    this.$emit('select-all', selection)
+  }
+
+  handleSelectionChange (selection: Array<any>): void {
+    this.$emit('selection-change', selection)
+  }
+
+  @Provide('sHierarchicalTable') sHierarchicalTable = this
+}
+</script>
+
+<style lang="scss" scoped>
+.s-hierarchical-table {
+  display: flex;
+  width: 100%;
+  background: var(--s-color-base-background);
+  &-level:not(:last-child) {
+    margin-right: 16px;
+    border-right: 1px solid var(--s-color-base-border-primary)
+  }
+}
+</style>
diff --git a/src/components/Table/STableColumn.vue b/src/components/Table/STableColumn.vue
index 715eaa05..6de202dc 100644
--- a/src/components/Table/STableColumn.vue
+++ b/src/components/Table/STableColumn.vue
@@ -1,207 +1,205 @@
-<template>
-  <el-table-column
-    :type="type"
-    :index="index"
-    :label="label"
-    :column-key="columnKey"
-    :prop="prop"
-    :width="computedWidth"
-    :min-width="minWidth"
-    :fixed="fixedPosition || false"
-    :render-header="renderHeader"
-    :sortable="sortable"
-    :sort-method="sortMethod"
-    :sort-by="sortBy"
-    :sort-orders="sortOrders"
-    :resizable="resizable"
-    :formatter="formatter"
-    :show-overflow-tooltip="showOverflowTooltip"
-    :align="align"
-    :header-align="headerAlign"
-    :class-name="className"
-    :label-class-name="labelClassName"
-    :selectable="selectable"
-    :reserve-selection="reserveSelection"
-    :filters="filters"
-    :filter-placement="filterPlacement"
-    :filter-multiple="filterMultiple"
-    :filter-method="filterMethod"
-    :filtered-value="filteredValue"
-  >
-    <slot v-for="(_, name) in $slots" :name="name" :slot="name" />
-    <template v-for="(_, name) in $scopedSlots" :slot="name" slot-scope="slotData"><slot :name="name" v-bind="slotData" /></template>
-  </el-table-column>
-</template>
-
-<script lang="ts">
-import { Vue, Component, Prop, Inject } from 'vue-property-decorator'
-
-import { Size } from '@/types'
-
-import { SortDirection, ColumnAlignment } from './consts'
-
-@Component
-export default class STableColumn extends Vue {
-  /**
-   * Type of the column. Can be `"selection"`, `"index"` or `"expand"`.
-   * If it's not defined, then it will be usual column without modifications
-   */
-  @Prop({ default: '', type: String }) readonly type!: string
-  /**
-   * Customize indices for each row. It works on columns with `type="index"`.
-   * Can be `number` or `(index: number) => number`
-   */
-  @Prop() readonly index!: number | ((index: number) => number)
-  /**
-   * Label of the column
-   */
-  @Prop({ default: '', type: String }) readonly label!: string
-  /**
-   * Column's key. If you need to use the `filter-change` event,
-   * you need this attribute to identify which column is being filtered
-   */
-  @Prop({ default: '', type: String }) readonly columnKey!: string
-  /**
-   * Name of the field
-   */
-  @Prop({ default: '', type: String }) readonly prop!: string
-  /**
-   * Column width in pixels. For instance, `width="80"`
-   */
-  @Prop({ type: String }) readonly width!: string
-  /**
-   * Column minimum width in pixels. Columns with `width` has a fixed width,
-   * while columns with `min-width` has a width that is distributed in proportion.
-   * For instance, `min-width="80"`
-   */
-  @Prop({ type: String }) readonly minWidth!: string
-  /**
-   * Will column be fixed at `"left"` or `"right"` position.
-   * If it's not defined, then it will be not fixed by default.
-   */
-  @Prop({ default: '', type: String }) readonly fixedPosition!: string
-  /**
-   * Render function for table header of this column.
-   * `(h, { column, $index }) => any`
-   */
-  @Prop() readonly renderHeader!: (h, { column, $index }) => any
-  /**
-   * Will column be sorted. Possible values: `true`, `false`, `"custom"`
-   * Remote sorting can be done by setting this attribute to `"custom"`
-   * and listening to the `sort-change` event of the Table component
-   */
-  @Prop({ default: false }) readonly sortable!: boolean | 'custom'
-  /**
-   * Sorting method like `Array.sort`, works when `sortable` is true.
-   * `(a, b) => number`
-   */
-  @Prop() readonly sortMethod!: (a, b) => number
-  /**
-   * Specify which property to sort by, works when `sortable` is true and `sort-method` is undefined.
-   * If set to an Array, the column will sequentially sort by the next property if the previous one is equal.
-   *
-   * Can be `string`, `Array<string>` or `(row, index) => string | Array<string>`
-   */
-  @Prop() readonly sortBy!: string | Array<string> | ((row, index) => string | Array<string>)
-  /**
-   * The order of the sorting strategies used when sorting the data,
-   * works when `sortable` is true.
-   * Accepts an array, as the user clicks on the header,
-   * the column is sorted in order of the elements in the array.
-   *
-   * The elements in the array need to be one of the following: `"ascending"`, `"descending"` and `null`.
-   *
-   * `[SortDirection.ASC, SortDirection.DESC, null]` is set by default
-   */
-  @Prop({ default: () => [SortDirection.ASC, SortDirection.DESC, null], type: Array }) readonly sortOrders!: Array<any>
-  /**
-   * Can column be resized. It works only when the table has `border` set to true.
-   *
-   * `false` by default
-   */
-  @Prop({ default: false, type: Boolean }) readonly resizable!: boolean
-  /**
-   * A function that formats cell content. `(row, column, cellValue, index) => any`
-   */
-  @Prop() readonly formatter!: (row, column, cellValue, index) => any
-  /**
-   * Will extra content be hidden and be replaced with a tooltip when hovering on the cell.
-   *
-   * `false` by default
-   */
-  @Prop({ default: false, type: Boolean }) readonly showOverflowTooltip!: boolean
-  /**
-   * Alignment property of the table column. Can be `"left"`, `"center"` or `"right"`.
-   *
-   * `"left"` is set by default
-   */
-  @Prop({ default: ColumnAlignment.LEFT, type: String }) readonly align!: string
-  /**
-   * Alignment property of the column header. Can be `"left"`, `"center"` or `"right"`.
-   *
-   * `"left"` is set by default
-   */
-  @Prop({ default: ColumnAlignment.LEFT, type: String }) readonly headerAlign!: string
-  /**
-   * Class name of cells in the column
-   */
-  @Prop({ type: String }) readonly className!: string
-  /**
-   * Class name of the label of this column
-   */
-  @Prop({ default: '', type: String }) readonly labelClassName!: string
-  /**
-   * A function that determines if a certain row can be selected.
-   * It works when `type="selection"`. `(row, index) => boolean`
-   */
-  @Prop() readonly selectable!: (row, index) => boolean
-  /**
-   * Will selection be reserved after data refreshing.
-   * It works when `type="selection"`.
-   *
-   * `row-key` is required for this to work.
-   *
-   * `false` by default
-   */
-  @Prop({ default: false, type: Boolean }) readonly reserveSelection!: boolean
-  /**
-   * TODO: create custom dropdown menu with filters
-   */
-  @Prop({ type: Array }) readonly filters!: Array<{ text; value }>
-  /**
-   * TODO: comment it when it'll be implemented
-   */
-  @Prop({ default: '', type: String }) readonly filterPlacement!: string
-  /**
-   * TODO: comment it when it'll be implemented
-   */
-  @Prop({ default: false, type: Boolean }) readonly filterMultiple!: boolean
-  /**
-   * TODO: comment it when it'll be implemented
-   */
-  @Prop() readonly filterMethod!: (value, row, column) => boolean
-  /**
-   * TODO: comment it when it'll be implemented
-   */
-  @Prop({ type: Array }) readonly filteredValue!: Array<any>
-
-  @Inject({ default: '', from: 'sTable' }) sTable
-
-  get computedWidth () {
-    const tableBorder = (this.sTable || {}).border
-    const size = (this.sTable || {}).size
-    if (!this.width && this.type === 'selection' && size) {
-      return !tableBorder ? ({
-        [Size.SMALL]: '46',
-        [Size.MEDIUM]: '48',
-        [Size.BIG]: '52'
-      }[size]) : ({
-        [Size.SMALL]: '42',
-        [Size.MEDIUM]: '44',
-        [Size.BIG]: '48'
-      }[size])
-    }
-    return this.width
-  }
-}
-</script>
+<template>
+  <el-table-column
+    :type="type"
+    :index="index"
+    :label="label"
+    :column-key="columnKey"
+    :prop="prop"
+    :width="computedWidth"
+    :min-width="minWidth"
+    :fixed="fixedPosition || false"
+    :render-header="renderHeader"
+    :sortable="sortable"
+    :sort-method="sortMethod"
+    :sort-by="sortBy"
+    :sort-orders="sortOrders"
+    :resizable="resizable"
+    :formatter="formatter"
+    :show-overflow-tooltip="showOverflowTooltip"
+    :align="align"
+    :header-align="headerAlign"
+    :class-name="className"
+    :label-class-name="labelClassName"
+    :selectable="selectable"
+    :reserve-selection="reserveSelection"
+    :filters="filters"
+    :filter-placement="filterPlacement"
+    :filter-multiple="filterMultiple"
+    :filter-method="filterMethod"
+    :filtered-value="filteredValue"
+  >
+    <slot v-for="(_, name) in $slots" :name="name" :slot="name" />
+    <template v-for="(_, name) in $scopedSlots" :slot="name" slot-scope="slotData"><slot :name="name" v-bind="slotData" /></template>
+  </el-table-column>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop, Inject } from 'vue-property-decorator'
+
+import { Size } from '@/types'
+
+import { SortDirection, ColumnAlignment } from './consts'
+
+@Component
+export default class STableColumn extends Vue {
+  /**
+   * Type of the column. Can be `"selection"`, `"index"` or `"expand"`.
+   * If it's not defined, then it will be usual column without modifications
+   */
+  @Prop({ default: '', type: String }) readonly type!: string
+  /**
+   * Customize indices for each row. It works on columns with `type="index"`.
+   * Can be `number` or `(index: number) => number`
+   */
+  @Prop() readonly index!: number | ((index: number) => number)
+  /**
+   * Label of the column
+   */
+  @Prop({ default: '', type: String }) readonly label!: string
+  /**
+   * Column's key. If you need to use the `filter-change` event,
+   * you need this attribute to identify which column is being filtered
+   */
+  @Prop({ default: '', type: String }) readonly columnKey!: string
+  /**
+   * Name of the field
+   */
+  @Prop({ default: '', type: String }) readonly prop!: string
+  /**
+   * Column width in pixels. For instance, `width="80"`
+   */
+  @Prop({ type: String }) readonly width!: string
+  /**
+   * Column minimum width in pixels. Columns with `width` has a fixed width,
+   * while columns with `min-width` has a width that is distributed in proportion.
+   * For instance, `min-width="80"`
+   */
+  @Prop({ type: String }) readonly minWidth!: string
+  /**
+   * Will column be fixed at `"left"` or `"right"` position.
+   * If it's not defined, then it will be not fixed by default.
+   */
+  @Prop({ default: '', type: String }) readonly fixedPosition!: string
+  /**
+   * Render function for table header of this column.
+   * `(h, { column, $index }) => any`
+   */
+  @Prop() readonly renderHeader!: (h, { column, $index }) => any
+  /**
+   * Will column be sorted. Possible values: `true`, `false`, `"custom"`
+   * Remote sorting can be done by setting this attribute to `"custom"`
+   * and listening to the `sort-change` event of the Table component
+   */
+  @Prop({ default: false }) readonly sortable!: boolean | 'custom'
+  /**
+   * Sorting method like `Array.sort`, works when `sortable` is true.
+   * `(a, b) => number`
+   */
+  @Prop() readonly sortMethod!: (a, b) => number
+  /**
+   * Specify which property to sort by, works when `sortable` is true and `sort-method` is undefined.
+   * If set to an Array, the column will sequentially sort by the next property if the previous one is equal.
+   *
+   * Can be `string`, `Array<string>` or `(row, index) => string | Array<string>`
+   */
+  @Prop() readonly sortBy!: string | Array<string> | ((row, index) => string | Array<string>)
+  /**
+   * The order of the sorting strategies used when sorting the data,
+   * works when `sortable` is true.
+   * Accepts an array, as the user clicks on the header,
+   * the column is sorted in order of the elements in the array.
+   *
+   * The elements in the array need to be one of the following: `"ascending"`, `"descending"` and `null`.
+   *
+   * `[SortDirection.ASC, SortDirection.DESC, null]` is set by default
+   */
+  @Prop({ default: () => [SortDirection.ASC, SortDirection.DESC, null], type: Array }) readonly sortOrders!: Array<any>
+  /**
+   * Can column be resized. It works only when the table has `border` set to true.
+   *
+   * `false` by default
+   */
+  @Prop({ default: false, type: Boolean }) readonly resizable!: boolean
+  /**
+   * A function that formats cell content. `(row, column, cellValue, index) => any`
+   */
+  @Prop() readonly formatter!: (row, column, cellValue, index) => any
+  /**
+   * Will extra content be hidden and be replaced with a tooltip when hovering on the cell.
+   *
+   * `false` by default
+   */
+  @Prop({ default: false, type: Boolean }) readonly showOverflowTooltip!: boolean
+  /**
+   * Alignment property of the table column. Can be `"left"`, `"center"` or `"right"`.
+   *
+   * `"left"` is set by default
+   */
+  @Prop({ default: ColumnAlignment.LEFT, type: String }) readonly align!: string
+  /**
+   * Alignment property of the column header. Can be `"left"`, `"center"` or `"right"`.
+   *
+   * `"left"` is set by default
+   */
+  @Prop({ default: ColumnAlignment.LEFT, type: String }) readonly headerAlign!: string
+  /**
+   * Class name of cells in the column
+   */
+  @Prop({ type: String }) readonly className!: string
+  /**
+   * Class name of the label of this column
+   */
+  @Prop({ default: '', type: String }) readonly labelClassName!: string
+  /**
+   * A function that determines if a certain row can be selected.
+   * It works when `type="selection"`. `(row, index) => boolean`
+   */
+  @Prop() readonly selectable!: (row, index) => boolean
+  /**
+   * Will selection be reserved after data refreshing.
+   * It works when `type="selection"`.
+   *
+   * `row-key` is required for this to work.
+   *
+   * `false` by default
+   */
+  @Prop({ default: false, type: Boolean }) readonly reserveSelection!: boolean
+  /**
+   * TODO: create custom dropdown menu with filters
+   */
+  @Prop({ type: Array }) readonly filters!: Array<{ text; value }>
+  /**
+   * TODO: comment it when it'll be implemented
+   */
+  @Prop({ default: '', type: String }) readonly filterPlacement!: string
+  /**
+   * TODO: comment it when it'll be implemented
+   */
+  @Prop({ default: false, type: Boolean }) readonly filterMultiple!: boolean
+  /**
+   * TODO: comment it when it'll be implemented
+   */
+  @Prop() readonly filterMethod!: (value, row, column) => boolean
+  /**
+   * TODO: comment it when it'll be implemented
+   */
+  @Prop({ type: Array }) readonly filteredValue!: Array<any>
+
+  @Inject({ default: '', from: 'sTable' }) sTable
+
+  get computedWidth () {
+    const tableBorder = (this.sTable || {}).border
+    const size = (this.sTable || {}).size
+    if (!this.width && this.type === 'selection') {
+      return !tableBorder ? ({
+        [Size.SMALL]: '46',
+        [Size.MEDIUM]: '48'
+      }[size] || '52') : ({
+        [Size.SMALL]: '42',
+        [Size.MEDIUM]: '44'
+      }[size] || '48')
+    }
+    return this.width
+  }
+}
+</script>
diff --git a/src/stories/Table/SHierarchicalTable.stories.ts b/src/stories/Table/SHierarchicalTable.stories.ts
index 30256af4..96a147c7 100644
--- a/src/stories/Table/SHierarchicalTable.stories.ts
+++ b/src/stories/Table/SHierarchicalTable.stories.ts
@@ -1,60 +1,67 @@
-import { withKnobs } from '@storybook/addon-knobs'
-
-import { SHierarchicalTable } from '../../components'
-
-export default {
-  component: SHierarchicalTable,
-  title: 'Design System/Components/Table/Hierarchical Table',
-  decorators: [withKnobs],
-  excludeStories: /.*Data$/
-}
-
-export const tableData = [
-  {
-    name: 'id',
-    label: 'ID',
-    content: [
-      'id-1',
-      'id-2',
-      'id-3',
-      'id-4',
-      'id-5'
-    ]
-  },
-  {
-    name: 'date',
-    label: 'Date',
-    content: [
-      '01.01.1970',
-      '02.01.1970',
-      '03.01.1970',
-      '04.01.1970',
-      '05.01.1970'
-    ]
-  },
-  {
-    name: 'file',
-    label: 'File',
-    content: [
-      'file-1.txt',
-      'file-2.txt',
-      'file-3.txt',
-      'file-4.txt',
-      'file-5.txt'
-    ]
-  }
-]
-
-export const configurable = () => ({
-  components: { SHierarchicalTable },
-  template: `<s-hierarchical-table
-               :data="tableData"
-             >
-               <template slot="date" slot-scope="{ value }">
-                 {{ value }} - test
-               </template>
-             </s-hierarchical-table>`,
-  data: () => ({
-    tableData: tableData
-  })
-})
+import { withKnobs, select } from '@storybook/addon-knobs'
+
+import { SHierarchicalTable } from '../../components'
+import { Size } from '../../types'
+
+export default {
+  component: SHierarchicalTable,
+  title: 'Design System/Components/Table/Hierarchical Table',
+  decorators: [withKnobs],
+  excludeStories: /.*Data$/
+}
+
+export const tableData = [
+  {
+    name: 'id',
+    label: 'ID',
+    content: [
+      'id-1',
+      'id-2',
+      'id-3',
+      'id-4',
+      'id-5'
+    ]
+  },
+  {
+    name: 'date',
+    label: 'Date',
+    content: [
+      '01.01.1970',
+      '02.01.1970',
+      '03.01.1970',
+      '04.01.1970',
+      '05.01.1970'
+    ]
+  },
+  {
+    name: 'file',
+    label: 'File',
+    content: [
+      'file-1.txt',
+      'file-2.txt',
+      'file-3.txt',
+      'file-4.txt',
+      'file-5.txt'
+    ]
+  }
+]
+
+export const configurable = () => ({
+  components: { SHierarchicalTable },
+  template: `<s-hierarchical-table
+               :data="tableData"
+               :size="size"
+             >
+               <template slot="date" slot-scope="{ value }">
+                 <b>{{ value }}</b>
+               </template>
+             </s-hierarchical-table>`,
+  data: () => ({
+    tableData: tableData
+  }),
+  props: {
+    size: {
+      default: select('Size', Object.values(Size), Size.BIG)
+    }
+  }
+})

From db880f9ca5074c4c6e558ce1d76b099db0942bf5 Mon Sep 17 00:00:00 2001
From: RDMStreet <RDMStreetOne@gmail.com>
Date: Wed, 19 May 2021 10:55:22 +0300
Subject: [PATCH 3/4] Some fixes

---
 src/components/Table/SHierarchicalTable.vue | 42 +++++++++++---------
 src/styles/table.scss                       | 44 +++++++++++++++++++++
 2 files changed, 68 insertions(+), 18 deletions(-)

diff --git a/src/components/Table/SHierarchicalTable.vue b/src/components/Table/SHierarchicalTable.vue
index 6d49bd26..e0af3c06 100644
--- a/src/components/Table/SHierarchicalTable.vue
+++ b/src/components/Table/SHierarchicalTable.vue
@@ -1,15 +1,19 @@
 <template>
   <div class="s-hierarchical-table">
     <s-table
-      class="s-hierarchical-table-level"
+      :class="{
+        's-hierarchical-table-level': true,
+        's-hierarchical-table-level--last': levelIndex === data.length - 1
+      }"
       v-for="(level, levelIndex) in data"
       :key="level.name"
       :data="level.content"
       :size="computedSize"
       :border="false"
-      @select="levelIndex === (data.length - 1) ? handleSelect : null"
-      @select-all="levelIndex === (data.length - 1) ? handleSelectAll : null"
-      @selection-change="levelIndex === (data.length - 1) ? handleSelectionChange : null"
+      :row-class-name="({ row }) => getRowClassName({ row, levelIndex })"
+      @select="handleSelect"
+      @select-all="handleSelectAll"
+      @selection-change="handleSelectionChange"
       @row-click="row => $emit('row-click', row, level)"
     >
       <s-table-column
@@ -18,11 +22,11 @@
       />
       <s-table-column
         prop="value"
-        :label="level.label"
+        :label="level.name"
       >
         <template slot-scope="{ row }">
           <slot
-            :name="level.name"
+            :name="level.id"
             :value="row"
           >
             {{ row }}
@@ -53,6 +57,12 @@ export default class SHierarchicalTable extends Mixins(SizeMixin) {
    * By default it's set to an empty array
    */
   @Prop({ default: () => [], type: Array }) readonly data!: Array<any>
+  /**
+   * Path of the table.
+   *
+   * By default it's set to an empty array
+   */
+  @Prop({ default: () => [], type: Array }) readonly path!: Array<any>
 
   handleSelect (selection: Array<any>, row: any): void {
     this.$emit('select', selection, row)
@@ -66,18 +76,14 @@ export default class SHierarchicalTable extends Mixins(SizeMixin) {
     this.$emit('selection-change', selection)
   }
 
+  getRowClassName ({ levelIndex, row }) {
+    const classes = ['s-hierarchical-table-row']
+    if (this.path[levelIndex] === row) {
+      classes.push('s-hierarchical-table-row--active')
+    }
+    return classes.join(' ')
+  }
+
   @Provide('sHierarchicalTable') sHierarchicalTable = this
 }
 </script>
-
-<style lang="scss" scoped>
-.s-hierarchical-table {
-  display: flex;
-  width: 100%;
-  background: var(--s-color-base-background);
-  &-level:not(:last-child) {
-    margin-right: 16px;
-    border-right: 1px solid var(--s-color-base-border-primary)
-  }
-}
-</style>
diff --git a/src/styles/table.scss b/src/styles/table.scss
index 24d54032..19f89ae0 100644
--- a/src/styles/table.scss
+++ b/src/styles/table.scss
@@ -139,3 +139,47 @@
   line-height: 22.4px;
   background: var(--s-color-base-background);
 }
+.s-hierarchical-table {
+  display: flex;
+  width: 100%;
+  background: var(--s-color-base-background);
+  &-level:not(&-level--last) {
+    margin-right: 16px;
+    border-right: 1px solid var(--s-color-base-border-primary)
+  }
+  .s-hierarchical-table-level {
+    .el-table__body {
+      display: block;
+    }
+    td {
+      padding: 0;
+    }
+    &:not(.s-hierarchical-table-level--last) {
+      .s-hierarchical-table-row {
+        cursor: pointer;
+        .cell {
+          margin: 4px;
+          padding-top: 3px;
+          padding-bottom: 3px;
+          border-radius: var(--s-border-radius-mini);
+          transition: background 200ms;
+        }
+        &--active .cell, &:hover .cell {
+          background: var(--s-color-base-border-primary);
+        }
+      }
+    }
+    &.s-hierarchical-table-level--last {
+      .s-hierarchical-table-row {
+        .cell {
+          margin: 4px 0;
+          padding-top: 3px;
+          padding-bottom: 3px;
+        }
+      }
+    }
+  }
+  .el-table--enable-row-hover.s-hierarchical-table-level:not(.s-hierarchical-table-level--last) .el-table__body tr.s-hierarchical-table-row:hover > td {
+    background: transparent;
+  }
+}
\ No newline at end of file

From 8db0af1d06507042ac49f0ae7ee58897196d0886 Mon Sep 17 00:00:00 2001
From: RDMStreet <RDMStreetOne@gmail.com>
Date: Wed, 19 May 2021 11:21:36 +0300
Subject: [PATCH 4/4] Update version to 0.8.8

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 7d3bef69..d0b74706 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.8.7",
+  "version": "0.8.8",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu/"