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/5] 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/5] 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 1ba08b6875c399fa89f49cce21fed4e5b4d8b30c Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Wed, 12 May 2021 10:19:37 +0000
Subject: [PATCH 3/5] Bump postcss from 7.0.32 to 8.2.10

Bumps [postcss](https://github.com/postcss/postcss) from 7.0.32 to 8.2.10.
- [Release notes](https://github.com/postcss/postcss/releases)
- [Changelog](https://github.com/postcss/postcss/blob/main/CHANGELOG.md)
- [Commits](https://github.com/postcss/postcss/compare/7.0.32...8.2.10)

Signed-off-by: dependabot[bot] <support@github.com>
---
 package.json |  2 +-
 yarn.lock    | 31 ++++++++++++++++++++-----------
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index c4c078e8..7d3bef69 100644
--- a/package.json
+++ b/package.json
@@ -68,7 +68,7 @@
     "jest": "^26.0.1",
     "lint-staged": "^9.5.0",
     "node-sass": "^4.12.0",
-    "postcss": "^7.0.23",
+    "postcss": "^8.2.10",
     "rollup": "^1.27.8",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-copy": "^3.3.0",
diff --git a/yarn.lock b/yarn.lock
index aeae21c0..89b86a7b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4882,10 +4882,10 @@ color@^3.0.0:
     color-convert "^1.9.1"
     color-string "^1.5.2"
 
-colorette@^1.1.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.0.tgz#45306add826d196e8c87236ac05d797f25982e63"
-  integrity sha512-soRSroY+OF/8OdA3PTQXwaDJeMc7TfknKKrxeSCencL2a4+Tx5zhxmmv7hdpCjhKBjehzp8+bwe/T68K0hpIjw==
+colorette@^1.1.0, colorette@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.2.tgz#cbcc79d5e99caea2dbf10eb3a26fd8b3e6acfa94"
+  integrity sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==
 
 colors@^1.1.2:
   version "1.4.0"
@@ -9561,12 +9561,7 @@ jmespath@^0.15.0:
   resolved "https://registry.yarnpkg.com/jmespath/-/jmespath-0.15.0.tgz#a3f222a9aae9f966f5d27c796510e28091764217"
   integrity sha1-o/Iiqarp+Wb10nx5ZRDigJF2Qhc=
 
-js-base64@^2.1.8:
-  version "2.5.2"
-  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.5.2.tgz#313b6274dda718f714d00b3330bbae6e38e90209"
-  integrity sha512-Vg8czh0Q7sFBSUMWWArX/miJeBWYBPpdU/3M/DKSaekLMqrqVPaedp+5mZhie/r0lgrcaYBfwXatEew6gwgiQQ==
-
-js-base64@^2.1.9:
+js-base64@^2.1.8, js-base64@^2.1.9:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.6.1.tgz#c328374225d2e65569791ded73c258e2c59334c7"
   integrity sha512-G5x2saUTupU9D/xBY9snJs3TxvwX8EkpLFiYlPpDt/VmMHOXprnSU1nxiTmFbijCX4BLF/cMRIfAcC5BiMYgFQ==
@@ -10750,6 +10745,11 @@ nan@^2.12.1, nan@^2.13.2:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.1.tgz#d7be34dfa3105b91494c3147089315eff8874b01"
   integrity sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw==
 
+nanoid@^3.1.22:
+  version "3.1.23"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.23.tgz#f744086ce7c2bc47ee0a8472574d5c78e4183a81"
+  integrity sha512-FiB0kzdP0FFVGDKlRLEQ1BgDzU87dy5NnzjeW9YZNt+/c3+q82EQDUwniSAUxp/F0gFNI1ZhKU1FqYsMuqZVnw==
+
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -12126,7 +12126,7 @@ postcss@^6.0.1:
     source-map "^0.6.1"
     supports-color "^5.4.0"
 
-postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.23, postcss@^7.0.26, postcss@^7.0.27, postcss@^7.0.30, postcss@^7.0.5, postcss@^7.0.6:
+postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.26, postcss@^7.0.27, postcss@^7.0.30, postcss@^7.0.5, postcss@^7.0.6:
   version "7.0.32"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.32.tgz#4310d6ee347053da3433db2be492883d62cec59d"
   integrity sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==
@@ -12135,6 +12135,15 @@ postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.2
     source-map "^0.6.1"
     supports-color "^6.1.0"
 
+postcss@^8.2.10:
+  version "8.2.10"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.2.10.tgz#ca7a042aa8aff494b334d0ff3e9e77079f6f702b"
+  integrity sha512-b/h7CPV7QEdrqIxtAf2j31U5ef05uBDuvoXv6L51Q4rcS1jdlXAVKJv+atCFdUXYl9dyTHGyoMzIepwowRJjFw==
+  dependencies:
+    colorette "^1.2.2"
+    nanoid "^3.1.22"
+    source-map "^0.6.1"
+
 prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"

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 4/5] 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 5/5] 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/"