How can I add ellipsis for overflowing text within AntDesign's Table component?

Question

Problem: When using AntDesign's Table component, I've set the width of each cell and when the text overflows, I would like the text to cutoff and show an ellipsis. The end goal is to have the ellipsis show a tooltip with the hidden text when the user hovers over it.

Here's my current code

<Table
          scroll={{ x: 1500, y: 240 }}
          pagination={false}
          columns={displayFile.headers.map((header) => ({
            title: header.name,
            dataIndex: header.name,
            width: "10rem",
          }))}
          dataSource={displayFile.data.map((row, index) => ({
            ...row,
            rowKey: `${displayFile.name}-row_${index}`,
          }))}
          rowKey={(record: any) => record.rowKey}
        />

Any insights would be greatly appreciated. Thank you!

Answer 1

just do like this .

<Table
//your table props
>

    <Column
        title="Col1"
        key="col1"
        dataIndex="col1"
        width={120}
        ellipsis={true}
    />
    <Column
        title="Col2"
        key="col2"
        dataIndex="col2"
        width={120}
        ellipsis={true}
    />
</Table>