Jetpack Compose：根据Header字符长度动态生成Table的行与列

需求说明 #

我有如下格式的数据：

[{"header":"Test","value":"value1"},{"header":"Test1","value":"value2"},{"header":"Test1122222","value":"value3"},{"header":"Test4","value":"value4"},{"header":"Tes5","value":"value5"},{"header":"Test7","value":"value7"},{"header":"Test8","value":"value8"},{"header":"Test9","value":"value9"}]

需要生成一个表格，其行列数根据每个header的字符长度动态调整——单元格宽度由对应header内容长度决定，当一行的总宽度达到容器宽度时自动换行，形成动态的行列布局（比如一行可能放4个单元格，另一行可能放7个）。

实现代码 #

由于Markdown原生表格无法实现动态行列调整，我们可以使用HTML结合JavaScript来完成：

<div id="dynamic-table-container" style="width: 100%; border: 1px solid #ccc; padding: 8px;"></div>

<script>
const data = [
  {"header":"Test","value":"value1"},
  {"header":"Test1","value":"value2"},
  {"header":"Test1122222","value":"value3"},
  {"header":"Test4","value":"value4"},
  {"header":"Tes5","value":"value5"},
  {"header":"Test7","value":"value7"},
  {"header":"Test8","value":"value8"},
  {"header":"Test9","value":"value9"}
];

const container = document.getElementById('dynamic-table-container');
const table = document.createElement('table');
table.style.width = '100%';
table.style.borderCollapse = 'collapse';

let currentRow = document.createElement('tr');
let rowWidth = 0;
const containerWidth = container.offsetWidth;

data.forEach(item => {
  // 创建单元格
  const cell = document.createElement('td');
  cell.innerHTML = `<strong>${item.header}</strong><br>${item.value}`;
  cell.style.border = '1px solid #ddd';
  cell.style.padding = '8px';
  cell.style.whiteSpace = 'nowrap'; // 防止header换行，保证宽度计算准确
  
  // 计算单元格宽度
  const cellWidth = cell.offsetWidth;
  
  // 如果当前行加这个单元格会超出容器宽度，就换行
  if (rowWidth + cellWidth > containerWidth && rowWidth > 0) {
    table.appendChild(currentRow);
    currentRow = document.createElement('tr');
    rowWidth = 0;
  }
  
  currentRow.appendChild(cell);
  rowWidth += cellWidth;
});

// 添加最后一行
if (currentRow.children.length > 0) {
  table.appendChild(currentRow);
}

container.appendChild(table);
</script>

代码说明 #

1. 动态换行逻辑：通过计算每个单元格的宽度，累加后与容器宽度对比，超出则创建新行
2. 单元格样式：设置whiteSpace: nowrap保证header内容不换行，确保宽度计算准确；添加边框和内边距提升可读性
3. 自适应容器：表格宽度设为100%，随容器宽度自动调整行列布局

内容的提问来源于stack exchange，提问作者Abhijit Chakra