<script lang=“ts”> import { defineComponent } from 'vue'

export default defineComponent({

name: "Table",
props: {
  files: {
    type: Array,
    required: true,
  },
}

}) </script>

<template>

<div class="table">
  <div class="tableHeader">
    <div class="tableHeader__cell table__cell--title">Step title</div>
    <!-- <div class="tableHeader__cell table__cell--arguments">Arguments</div> -->
  </div>

  <div class="tableBody">
    <div class="file" v-for="file in files">
      <div class="file__name">{{file.file}}</div>
      <div class="steps">
        <div class="step" v-for="step in file.steps">
          <div class="step__cell table__cell--title">{{step.title}}</div>
          <!-- <div class="step__cell table__cell--arguments arguments">
            <div class="arguments__block" v-for="argument in step.arguments">{{argument}}</div>
          </div> -->
        </div>
      </div>
    </div>
  </div>    
</div>

</template>

<style type=“text/css”> .table {

margin-left: 8px;

}

.table__cell–title {

flex: 1;
max-width: 640px;
margin-right: 16px;

} .table__cell–arguments {

flex: 1;
max-width: 300px;
overflow-x: hidden;

}

.tableHeader {

display: flex;

}

.tableHeader__cell {

font-weight: bold;

}

.tableBody {

margin-top: 16px;

}

.step {

display: flex;

}

.step__cell {

line-height: 21px;

}

.step:not(:last-of-type) {

margin-bottom: 8px;

}

.file {

margin-top: 14px;

}

.file__name + .steps {

margin-top: 7px;

}

.arguments {

display: flex;

}

.arguments__block {

margin-right: 4px;

}

.file__name {

position: sticky;
color: #767676;
font-size: 14px;
padding: 2px 8px;
background: white;
border-radius: 4px;
display: inline-block;

} </style>