Как связать ячейки таблицы между собой и выровнять высоту строки по наибольшей ячейке?

Question

[AndreySergienko]

Вопрос в том, как применять высоту ячеек в строке по самой большой ячейке?
Может есть решение через css?

Исходя из массива данных с бэка я формирую динамически таблицу.
Создаю колонки. в зависимости от заданного заранее количества и к ним привязываю ключи объекта.
Каждая строка это объект. Ячейка есть св-во объекта.

Ячейка шапки имеет класс table__cell table__cell--head
Ячейка тела включает обёртку в виде table__body и вложенный div с классами table__cell table__cell--body



Vue 3 (из примера убрал импорты и определение компонентов)
Главный компонент:

<template>
  <div class="table">
    <TheTableTouchBar
      v-if="selectedItems.length"
      :touch-bar-list="touchBarList"
      :selected-items="selectedItems"
    />

    <TheTableCheckbox
      :is-checkbox="isCheckbox"
      :cells="cells"
      :selected-items="selectedItems"
      @selected="handlerSelectedItem"
      @selectedAll="handlerSelectedAllItems"
    />

      <div
        class="table__column"
        v-for="column in columns"
        :key="column.value"
      >

        <TheTableHead
          :column="column"
        />
        <TheTableBody
          :keyValue="column.value"
          :cells="cells"
        />

      </div>

  </div>
</template>


<script setup>
const props = defineProps({
  // Setting Content
  columns: {
    type: Array,
    required: true
  },
  cells: {
    type: Array,
    required: true
  },
  touchBarList: {
    type: Array,
    required: false
  },
  isCheckbox: {
    type: Boolean,
    required: false,
    default: true
  },
  isActionOnClickCell: {
    type: Boolean,
    required: false
  }
})

// Let
const selectedItems = ref([])

// Function
const handlerSelectedItem = (cellId) => {
  if (selectedItems.value.includes(cellId)) {
    selectedItems.value = selectedItems.value.filter((id) => id !== cellId)
  } else {
    selectedItems.value.push(cellId)
  }
}
const handlerSelectedAllItems = () => {
  if (selectedItems.value.length !== props.cells.length) {
    props.cells.map((cell) => {
      selectedItems.value.push(cell.id)
    })
  } else {
    selectedItems.value.length = 0
  }
}
</script>

Компонент шапки:

<template>
  <div class="table__cell table__cell--head">
    {{ column.name }}
    <VIcons v-if="column.filter" />
  </div>
</template>

<script setup>
const props = defineProps({
  column: {
    type: Object,
    required: true
  }
})
</script>

Компонент содержимого:

<template>
  <div
    class="table__body"
    v-for="(cell, index) in cells"
    :key="cell[keyValue]"
  >
    <div :class="['table__cell table__cell--body',
           index % 2 ? 'table__cell--body-gray' : ''
           ]">
      {{ cell[keyValue] }}
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  cells: {
    type: Array,
    required: true
  },
  keyValue: {
    type: String,
    required: true
  }
})
</script>

Comments

[AndreySergienko]

Моим теоретическим решением на данный момент является присвоение дата атрибута к ячейкам строки.

[AndreySergienko]

Практическое решение.
Падинги задаю через класс css.

const table = ref(null)
onMounted(() => {
  const rows = Array.from(table.value.querySelectorAll('.table__cell'))
  for (let counterColumn = 0; counterColumn < props.cells.length + 1; counterColumn++) {
   let row = rows
      .filter((rowsItem) => +rowsItem.dataset.row === counterColumn)
      .sort((a, b) => b.offsetHeight - a.offsetHeight)
  row.map((cell) => {
    let paddingHeight = parseInt(getComputedStyle(cell).paddingTop) + parseInt(getComputedStyle(cell).paddingBottom)
    cell.style.height = row[0].offsetHeight - paddingHeight + 'px'
  })
  }
})

[wonderingpeanut]

почему не используешь нативные таблицы? там вроде высота выравнивается автоматически.
другой вариант - использовать флекс или грид

[imko]

Тебе нужны не колоки а ряды, дальше все просто будет