如何调整react-data-table-component单元格大小以适配内容

我用react-data-table-component做系统的信息查询功能，现在遇到个问题：单元格里内容多的时候显示不全，想实现类似react-table那种单元格自动适配内容高度、完整展示所有信息的效果。

表格样式 #

export const estilos = {
    table: {
        style: {
        },
    },
    tableWrapper: {
        style: {
            display: "table",
        },
    },
    responsiveWrapper: {
        style: {},
    },
    header: {
        style: {
            fontSize: "22px",
            minHeight: "56px",
            paddingLeft: "0px",
            paddingRight: "0px",
        },
    },
    subHeader: {
        style: {
            minHeight: "52px",
        },
    },
    head: {
        style: {
            fontSize: "14px",
            fontWeight: 500,
            minWidth: "0px",
            textAlign: "center",
        },
    },
    headRow: {
        style: {
            fontSize: '17px',
            minHeight: "50px",
            borderBottomWidth: "1px",
            borderBottomStyle: "solid",
        },
        denseStyle: {
            minHeight: "32px",
        },
    },
    headCells: {
        style: {
            paddingLeft: "0px",
            paddingRight: "0px",
            fontWeight: 700,
        },
        draggingStyle: {
            cursor: "move",
        },
    },
    contextMenu: {
        style: {
            fontSize: "18px",
            fontWeight: 400,
            paddingLeft: "16px",
            paddingRight: "8px",
            transform: 'translate3d(0, -100%, 0)',
            transitionDuration: '125ms',
            transitionTimingFunction: 'cubic-bezier(0, 0, 0.2, 1)',
            willChange: 'transform',
        },
        activeStyle: {
            transform: 'translate3d(0, 0, 0)',
        },
    },
    cells: {
        style: {
            paddingLeft: '0px',
            paddingRight: '0px',
            wordBreak: 'break-word',
        },
        draggingStyle: {},
    },
    rows: {
        style: {
            fontFamily: 'arial',
            fontSize: '14px',
            fontWeight: 0,
            minHeight: '35px',
            '&:not(:last-of-type)': {
                borderBottomStyle: 'solid',
                borderBottomWidth: '1px',
            },
        },
        denseStyle: {
            minHeight: "32px",
        },
        selectedHighlightStyle: {
            '&:nth-of-type(n)': {
            },
        },
        highlightOnHoverStyle: {
            transitionDuration: '0.15s',
            transitionProperty: 'background-color',
            outlineStyle: 'solid',
            outlineWidth: '1px',
        },
        stripedStyle: {
        },
    },
    expanderRow: {
        style: {
        },
    },
    expanderCell: {
        style: {
            flex: '0 0 48px',
        },
    },
    expanderButton: {
        style: {
            backgroundColor: 'transparent',
            borderRadius: '2px',
            transition: '0.25s',
            height: '100%',
            width: '100%',
            '&:hover:enabled': {
                cursor: 'pointer',
            },
            '&:disabled': {
            },
            '&:hover:not(:disabled)': {
                cursor: 'pointer',
            },
            '&:focus': {
                outline: 'none',
            },
            svg: {
                margin: 'auto',
            },
        },
    },
};

DataTable组件用法 #

<DataTable
    columns={columns}
    noDataComponent="No hay registros para mostrar"
    data={rows}
    dense
    progressPending={pending}
    paginationComponentOptions={paginationComponentOptions}
    paginationResetDefaultPage={resetPaginationToogle}
    customStyles={estilos}
    sortIcon={<FontAwesomeIcon icon={faArrowDownLong} />}
    pagination
    paginationServer
    paginationTotalRows={noTotalVentas}
    onChangeRowsPerPage={handleChangeRowsPerPage}
    onChangePage={handleChangePage}
/>

要让单元格自动适配内容高度，改这几个地方就行：

1. 放开行高限制
   现在rows.style里的minHeight只是最小高度，但没允许行高随内容扩展。加个height: 'auto'，让行高自动调整：

   rows: {
       style: {
           fontFamily: 'arial',
           fontSize: '14px',
           fontWeight: 0,
           minHeight: '35px', // 保留最小高度，内容少的时候不显得太扁
           height: 'auto', // 关键：允许行高根据内容自动变高
           '&:not(:last-of-type)': {
               borderBottomStyle: 'solid',
               borderBottomWidth: '1px',
           },
       },
       // 其他样式不变
   },
   

2. 调整单元格内边距和换行规则
   当前单元格内边距为0，内容挤在一起，而且可能没处理好换行。修改一下：

   cells: {
       style: {
           paddingLeft: '8px', // 加左右内边距，内容不贴边
           paddingRight: '8px',
           wordBreak: 'break-word',
           whiteSpace: 'pre-wrap', // 保留文本里的换行符，自动换行
       },
       // 其他样式不变
   },
   

3. 移除表格容器的强制布局
   tableWrapper里的display: "table"可能会限制高度，直接删掉这个设置：

   tableWrapper: {
       style: {
           // 删掉 display: "table"
       },
   },
   

4. 检查列定义
   看看你的columns配置里有没有给列设固定宽度，如果有，去掉固定宽度，让列自适应内容宽度。

改完这些，单元格就能自动根据内容调整高度，完整显示所有信息了。

内容的提问来源于stack exchange，提问作者Jose David Ayala Franco