[Vuejs]-Width of cells in grid-table

by

1👍

✅

One option would be to use the same grid for both the header and the main part. In other word the display: grid would be apply to the div.table element. In order to make div.table__head-el and div.table__field cells of this grid div.table__header, div.table__body and table__row must have display: contents. The rest of the CSS must be adapt as well but HTML and JS stay the same (I’ve added a blank property at the end of tableItems objects so the length of those items match the length of the header)

new Vue({ 
    el: "#test",
    data: {
     headers: [
        {
          title: '#'
        },
        {
          title: 'ID', icon: 'height'
        },
        {
          title: 'Номер', icon: 'height'
        },
        {
          title: 'Тип', icon: 'height'
        },
        {
          title: 'Марка', icon: 'height'
        },
        {
          title: 'Логист', icon: 'height'
        },
        {
          title: 'Колонна', icon: 'height'
        },
        {
          title: 'Трекер', icon: 'height'
        },
        {
          title: 'Дата привязки трекера', icon: 'height'
        },
        {
          title: 'Дата последних координат', icon: 'height'
        },
        {
          title: 'Удалена'
        },
        {
          title: 'Дата удаления'
        }
      ],
   tableItems: [
        {
          number: 1,
          id: '42537370',
          numberCar: 'В855АТ147',
          type: 'Тягач',
          brand: 'Mercedes-Benz',
          logistician: 'Томсон Артём Александрович',
          column: 'Андреев Евгений',
          tracker: '86793',
          dateStart: '29.03.2021 16:42:01',
          dateEnd: '07.06.2021 13:49:39',
          isDeleted: false,
          blank: ''
        },
        {
          number: 1,
          id: '42537370',
          numberCar: 'В855АТ147',
          type: 'Тягач',
          brand: 'Mercedes-Benz',
          logistician: 'Имя Фамилия',
          column: 'Андреев',
          tracker: '48671111111193',
          dateStart: '29.03.2021 16:42:01',
          dateEnd: '07.06.2021 13:49:39',
          isDeleted: false,
          blank: ''
        }
      ],
    },
    computed: {
    },
    methods: {
  }
});
html {
  --border: 1px solid black;
  --border-radius: 8px;
}

.table {
      max-width: 100%;
    padding: 0 75px;
    display: grid;
    grid-template-columns: minmax(0, 60px) repeat(11, minmax(0, auto));
}

.table__header, .table__body, .table__row {
  display: contents;
}

.table__head-el, .table__field {
  padding: 12px 20px;
}

.table__head-el {
  border-top: var(--border);
  border-bottom: var(--border);
  margin-bottom: 20px;
}

.table__head-el, .table__field {
  display: grid;
  place-items: center;
  overflow: hidden;
}

.table__head-el:first-child {
  border-left: var(--border);
  border-radius: var(--border-radius) 0 0 var(--border-radius);
}

.table__head-el:last-child {
  border-right: var(--border);
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.table__row:first-child > .table__field {
  border-top: var(--border);
}

.table__row:last-child > .table__field {
  border-bottom: var(--border);
}

.table__field:first-child {
  border-left: var(--border);
}

.table__field:last-child {
  border-right: var(--border);
}

.table__row:first-child > .table__field:first-child {
  border-top-left-radius: var(--border-radius);
}

.table__row:first-child > .table__field:last-child {
  border-top-right-radius: var(--border-radius);
}

.table__row:last-child > .table__field:first-child {
  border-bottom-left-radius: var(--border-radius);
}

.table__row:last-child > .table__field:last-child {
  border-bottom-right-radius: var(--border-radius);
}

.table__row:hover > .table__field {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="test">
  <div class="table">
    <div class="table__header">
      <div v-for="(item,index) in headers" :key="index" class="table__head-el">
        {{ item.title }}
      </div>
    </div>
    <div class="table__body">
      <div v-for="(el, indexx) in tableItems" :key="indexx" class="table__row">
        <span v-for="(elem, indexxx) in el" :key="indexxx" class="table__field">
          {{elem}}
        </span>
      </div>
    </div>
  </div>
</div>

Leave a comment