reactjsantd

Why is a plus button being added to my Ant Design table's rows?


I am using antd "antd": "^3.26.3", to develop a app, now the table have a + like this:

[1]: https://i.sstatic.net/NI00y.png

I did not add any setting to add the +, why the + come out? what should I do to remove the +? this is my antd table source code:

<div className={styles.tableList}>
            <StandardTable
              rowSelection={{
                type: 'checkbox',
                ...rowSelection,
              }}
              loading={loading}
              data={data}
              columns={this.columns}
              selectedRows={[]}
              rowKey="_index"
              hideAlert
              disablePagination={false}
              expandIconAsCell={false}
              expandIconColumnIndex={-1}
              onChange={this.handleStandardTableChange}
            />
          </div>

I have tried to add this config but still did not make the + disappear, what should I do to fix it?

expandIconAsCell={false}
expandIconColumnIndex={-1}

Solution

  • In antd Table component, + icon represents a row that can be expandable when clicked. By default, it is not expanded so when you clicked on + it will expand.

    There are basically two cases in which + can appear in the rows of the table.

    1. Using expandable api, expandable api allow us to render something things (data) by clicking + or anywhere in the whole row (this can be set by expandRowByClick as true). A common example for this case can be found here.

    2. Using children property in the data prop. Example.
      Even if children property has an empty array, it will still show the + icon and when it is clicked it will expand with some extra spaces but no data in it.

    Note: You should not use both the ways in one antd Table. So, you always have to choose one way over another depending upon the use cases.


    In your case, you have mentioned that you have children property in your dataset which is a boolean value and has a different purpose than the children property of antd table dataset.

    As I have mentioned in my comments, you just need to alias the children property to some other name, maybe haveChildren when mapping your dataset to a custom dataset.