list table ellipsis

I have a table on ant design with this code

<List>
      <Table {...tableProps} rowKey="id">
        <Table.Column dataIndex="name" title="Nom" />
        <Table.Column dataIndex="address" title="Adresse" ellipsis={true} />
        <Table.Column dataIndex="description" title="Description" ellipsis={true} />
      </Table>
    </List>

<List>
      <Table {...tableProps} rowKey="id">
        <Table.Column dataIndex="name" title="Nom" />
        <Table.Column dataIndex="address" title="Adresse" ellipsis={true} />
        <Table.Column dataIndex="description" title="Description" ellipsis={true} />
      </Table>
    </List>

the ellipsis prop doesn't work.. am I missing something?

3 Replies

kapa.ai•4w ago

Hi @SetiZ. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To address the issue with the ellipsis prop not working in your Ant Design table, you can ensure that the ellipsis prop is correctly applied to the Table.Column components. The ellipsis prop should work as expected if the content within the columns exceeds the available space. Here is an example of how to use the ellipsis prop correctly in a Table.Column:

<List>
  <Table {...tableProps} rowKey="id">
    <Table.Column dataIndex="name" title="Nom" />
    <Table.Column dataIndex="address" title="Adresse" ellipsis={true} />
    <Table.Column dataIndex="description" title="Description" ellipsis={true} />
  </Table>
</List>

<List>
  <Table {...tableProps} rowKey="id">
    <Table.Column dataIndex="name" title="Nom" />
    <Table.Column dataIndex="address" title="Adresse" ellipsis={true} />
    <Table.Column dataIndex="description" title="Description" ellipsis={true} />
  </Table>
</List>

If the ellipsis prop still doesn't work, you might want to check the following: 1. CSS Styling: Ensure that the table and its columns have enough width constraints to trigger the ellipsis. Sometimes, the ellipsis won't show if the columns are too wide. 2. Content Length: Make sure the content in the address and description fields is long enough to exceed the column width, which would trigger the ellipsis. 3. Ant Design Version: Ensure you are using a compatible version of Ant Design that supports the ellipsis prop. For more detailed information, you can refer to the Ant Design Table documentation (https://ant.design/components/table/) and the Refine documentation on using tables with Ant Design (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-table/#example). If you continue to face issues, you might want to provide more context or check if there are any specific CSS rules that might be overriding the default behavior of the ellipsis prop. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@267689263246606336> kapa.ai is still learning and improving, please let us know how it did by reacting below

rival-black•4w ago

I guess I'll have to do it with css directly..