Introduction:

In the daily development process, as long as the use of ANTD, you can not avoid dealing with the table component, so it will often collide with the spark of the problem 🧨🧨🧨, here is a record of my recent project development, encountered some problems, currently mainly related to the table style problems, key, And the issues involved in selectable and extensible tables, which will continue to be updated. ✨ ✨

Table style problem

The style of the columns

When we set some styles for the whole table, we will choose to directly add a className attribute to the table to control, but if we want to add some styles for each Column, Antd also provides className attribute for Column. But when it comes to styling a column, I usually add styles to the DOM nodes rendered in render

For example:

{
        key: 'ips',
        title: 'IPS',
        render: (n, cn) => {
          return <div style={{ maxWidth: 320 }}>{n.id === -1? '***':n.ips}</div> 
        }
}
Copy the code

The style

When you want to add some styles to a row, Antd provides a rowClassName attribute for us first. However, it is rare to modify the row style. As a newcomer, I will make a detailed supplement after personal practice to avoid mistakes. 👀 👀

Other style

The only rule of thumb I have for styling is to go to the console, and when you can’t figure out why you didn’t change the style of the Table, go to the console and see which line of code controls the rendering. ✌ small example: in this project UI students think each row in Table is a little too high by default and want to change our ✌ smaller

First of all, look at the documentation. I looked at all the attributes of the Table in the API, and found that there was no row height control, so I searched in the console, and finally found that the padding was the culprit of row height in the Table

.ant-table-thead>tr>th, .ant-table-tbody>tr>td { padding: 16px; Overflow-wrap: break-word; overflow-wrap: break-word; overflow-wrap: break-word; } .commonTable table tbody tr td { padding: 11px 16px ! important; // Make this change and you are done 👌}Copy the code

By looking at the console, we know where to start when we make changes.

A warm reminder, many times when we modify the table style does not take effect, just need to add! Important is ok! 😜 😜

Function of keys in a table

(Style is only a very small aspect of the table, I find the real magic is this mysterious key👼👼👼)

First, we know that in the React kingdom, keys are always important. All array components must bind keys. In the Table, the data values in the dataSource and columns need to be specified with keys. For a dataSource, the key attribute of each column is used as a unique identifier. The key of the Table is the same as the key of the dataSource and the columns.

<Table key={selected. Id} //key👈👈👈 rowKey={(record) => record.id} //rowKey className={Styles.commonTable} rowSelection={rowSelection} columns={_this.getColumns() } dataSource={TableList} />Copy the code

When you encounter a situation like this:

When you switch between tables under multiple tabs, your paging or filtering criteria are not reset, and the Table value from the previous Tab is retained. ❓ ❓

Or when you call a method and want to re-render the table, you suddenly get overwhelmed. ⁉ ⁉

At this point, you can set a key to your Table as an identifier. Whenever you want to re-render the Table, you can change its key so that you don’t get overwhelmed! 🎉 🎉

For example, in the first case, you give each Tab an ID and use that ID as the key of the Table, so that no matter how much you did in the previous Tab, when you switch to the next Tab, the Table will be re-rendered, leaving nothing of the previous Table.

If you think about it, this is actually a small application of the component key in the Table. Table or not, you can assign a key to any component, and any change will trigger rerendering. Here’s a small example that I think is a good one:

Here, the extendable Table is used. The extendable Table
is placed as a child component in the parent component

, and has a transfer and delete method in the parent component. The implementation now makes changes to the child component’s data by selecting the row in
and calling the delete or migrate method in the parent component.

In fact, it is not difficult for us to do the operation of transfer and delete, just to adjust an interface, but everyone with development experience should know that after deleting or transferring the operation, we need to request the data of the table again, and show the latest data to the user, then there is a problem. It would be nice to maintain the child’s data in the parent

, but the child maintains its own Table data (the interface that gets the Table data is called in the child’s rendering). The question then becomes, after the parent does something, how does the child rerender itself?

Finally, under the guidance of the big guy, I used the way of time stamp:

Add a time stamp to the child component’s key, update the time stamp after a delete or transfer, and the component will re-render and request the latest data.

<RowExpand key={record.id + upDateTime} {... this.props} />Copy the code

I have to say, time stamps and key tags are really good for cp, but I did it anyway, and I don’t know if anyone else in this room learned it. 💪 💪 💪

That’s allkeyLet me tell you morerowKey!!!!

If the above key is a small application of a key property that is common to all components, then rowKey is a Table property that is unique to components.

In the API, it says something like this

RowKey: The key value of a table row, which can be a string or a function

I didn’t realize that this rowKey was useful until I came across the rowSelection table check box.

In the Table component, when it comes to check boxes, there is usually the following configuration:

Const rowSelection = {selectedRowKeys, // rowKey onChange: this.onselectChange, // getCheckboxProps when an item is changed: This.getcheckboxprops // Set the properties of each checkbox};Copy the code

I haven’t checked whether the Rowkey is accurate or not (experienced friends or time-rich friends can check 😮😮), I think that in general this Rowkey is the key value of every data in your dataSource, but the back end also doesn’t know that every data should have a key attribute, so it usually doesn’t. The Rowkey is 0, 1, 2, 3….

What if we don’t want the default Rowkey, and instead want the ID of each row as a Rowkey?

Do you want to go through the data and add a key to each one? NoNoNo, just one sentence:

<Table key={selected.id} rowKey={(record) => record.id} // />Copy the code

In this case, we get the id of the checked data is very convenient!

“

To be continued… (Temporarily more here, front-end rookie, this is just a little experience in the project, after will continue to add material drops!! 👻 👻 👻)