PrimeReact DataTable高度无法撑满窗口仅适配数据大小问题

问题复现 #

使用PrimeReact DataTable渲染列表时，预期表格占满窗口全高，实际表格高度仅由渲染的数据行数决定，无法自动撑满容器剩余空间。
原有实现代码：

<div style={{ padding: '0rem 1rem 1rem 1rem' }}>
    <DataTable value={attributes} 
        showGridlines
        stripedRows
        resizableColumns 
        columnResizeMode="fit"
        paginator
        rows={12}>
        <Column field="name" header="Name"></Column>
        <Column field="displayName" header="Display Name"></Column>
        <Column field="headerName" header="Header Name"></Column>
        <Column field="editable" header="Editable" body={editableBodyTemplate}></Column>
        <Column field="isDefault" header="Is Default" body={isDefaultBodyTemplate}></Column>
    </DataTable>
</div>

实际运行效果：

根因说明 #

PrimeReact DataTable默认高度跟随内容自适应，要实现全高填充需要两个前提：

• 从页面根节点到DataTable的所有父级容器都有明确的高度定义，默认块级元素高度由内容撑开，没有显式高度的情况下子元素无法实现百分比高度填充
• DataTable需要开启滚动弹性高度模式，否则不会自动分配剩余空间给表体区域

修复方案 #

• 第一步：补全全局高度链，给页面根节点设置100%高度，确保高度可以逐层继承

html, body, #root {
  height: 100%;
  margin: 0;
  padding: 0;
}

• 第二步：修改外层包裹容器样式，使用flex布局让容器占满可用高度，同时保留原有内边距，注意添加boxSizing: border-box避免padding导致容器溢出视口
• 第三步：给DataTable添加scrollable和scrollHeight="flex"属性，开启官方弹性高度模式，该模式下会自动固定表头、将分页器钉在表格底部，表体超出高度时自动出现滚动条，不需要手动计算高度值

修复后的完整代码：

<div style={{ 
  padding: '0rem 1rem 1rem 1rem',
  height: '100%',
  boxSizing: 'border-box',
  display: 'flex',
  flexDirection: 'column'
}}>
    <DataTable 
        value={attributes} 
        showGridlines
        stripedRows
        resizableColumns 
        columnResizeMode="fit"
        paginator
        rows={12}
        scrollable
        scrollHeight="flex"
        style={{ flex: 1 }}
    >
        <Column field="name" header="Name"></Column>
        <Column field="displayName" header="Display Name"></Column>
        <Column field="headerName" header="Header Name"></Column>
        <Column field="editable" header="Editable" body={editableBodyTemplate}></Column>
        <Column field="isDefault" header="Is Default" body={isDefaultBodyTemplate}></Column>
    </DataTable>
</div>

如果页面存在顶部导航、侧边菜单栏等固定高度元素，只需要调整DataTable直接父容器的高度为扣除固定元素后的剩余高度即可，弹性模式会自动适配父容器尺寸，无需修改DataTable其他配置。

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