如何对齐react-table表头文本并设置筛选输入框占满列宽

1. 未启用筛选列与已启用筛选列表头对齐 #

出现错位的原因是未启用筛选的列不会渲染筛选组件的DOM节点，缺失了对应的高度占位，导致表头文字垂直位置不一致，可任选以下一种方式实现：

• 统一筛选容器占位高度
  修改表头中渲染筛选组件的代码，给包裹筛选的容器设置固定最小高度，不管是否有筛选组件都占用相同高度：

  {/* 原有代码：<div>{ column.canFilter ? column.render('Filter') : null}</div> */}
  {/* 修改为 */}
  <div style={{ minHeight: '38px', marginTop: '8px' }}>
    { column.canFilter ? column.render('Filter') : null}
  </div>
  

  你可以根据自己筛选组件的实际高度调整minHeight的数值。
• 修改表头单元格布局规则
  在你定义的ColumnHeader样式组件中添加以下CSS规则：

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  

  所有表头单元格统一使用纵向弹性布局，表头文字统一顶部对齐，下方自动填充剩余高度，自然实现对齐。

2. 筛选输入框占满整列宽度 #

可以实现，只需要给两个筛选组件的输入控件添加宽度规则即可：

• 修改DefaultColumnFilter中的输入框：

  <input
    style={{ width: '100%', boxSizing: 'border-box', padding: '4px' }}
    value={filterValue || ''}
    onChange={e => {
      setFilter(e.target.value || undefined)
    }}
    placeholder={`Search ${count} records...`}
  />
  

• 修改SelectColumnFilter中的下拉选择框：

  <select
    style={{ width: '100%', boxSizing: 'border-box', padding: '4px' }}
    value={filterValue}
    onChange={e => {
      setFilter(e.target.value || undefined);
    }}
  >
    {/* 原有option选项不变 */}
  </select>
  

  其中box-sizing: border-box用于避免输入框的内边距、边框导致整体宽度超出列宽，出现横向溢出的问题。

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