Menu
We have requirement where we need to show 'Hide/Show' columns feature on the header of table and also we want to provide different color to the header of table in ant design. Can anyone help me how can we do this? I did not find any control to do it as header rendering is completely internal to component.
601
You can make use of the responsive property on the column that you want to control for screen sizes. Just add a From To column with a custom render function, and set the responsive property on that column to only show on xs screens. The From and To columns will have the responsive property set to show on md and above.
Simply define a new sorting routine in utils/sorter. js , add it to the Sorter “enum,” and use it in your sorter prop for any column that needs it.
What I tried to resolve the background colour issue of header is overwrite the ant style class as below
thead[class*="ant-table-thead"] th{
background-color: yellow !important;
}
I am not sure if this is the correct way of doing or not. antd should provide the property on Table to configure the header style.
Is there any other better way to do it?
145
You can use the <Table.Column title={<...any react node...>}> attribute in combination with ordinary CSS.
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
