Skip to main content

Add ClassName

If you need to customize td style, you can use css selector to customize the style, Example:

td:nth-child(2){
--tr-bg-color: rgba(133, 40, 40, 0.51);
}

In addition, you can also add classes to specific fields and update them with css

import {formatCurrency} from 'bear-jsutils/number';
import Table from '@acrool/react-table';
import styled from 'styled-components';
import clsx from "clsx";


const AddClassName = () => {

return <MyTable
isDark
title={{
id: {text: 'ID', col: 40},
name: {text: 'Name', col: 'auto', className: 'head-light'},
amount: {text: 'Amount', col: '80px', titleAlign: 'right', dataAlign: 'right'},
role: {text: 'Role', col: '120px'},
}}
footer={[
{
name: {
value: 'Footer Name',
className: 'footer-light',
},
}
]}
data={data.slice(0, 8).map(row => {
return {
id: row.id,
onClickRow: collapse => collapse(),
detail: [
{
name: {
value: 'Detail..',
className: clsx({'footer-light': row.id === 3}),
},
}
],

field: {
id: row.id,
name: {
value: row.name,
className: clsx({'body-light': row.id === 2}),
},
role: row.role,
amount: `$ ${formatCurrency(row.amount)}`,
},
};
})}
/>
}

export default AddClassName;



const MyTable = styled(Table)`

.head-light,
.body-light,
.footer-light
{
--tr-bg-color: rgba(133, 40, 40, 0.51);
--tr-bg-hover-color: var(--tr-bg-color);
--tr-even-bg-color: var(--tr-bg-color);
--tr-even-bg-hover-color: var(--tr-bg-color);
}

`;


ID
Name
Amount
Role
1Jack Wu$ 200Admin
2Imagine Chiu$ 99Guest
3Jason Dinwiddie$ 880Manage
4Gloria Lu$ 12,300Guest
5Adam Bolton$ 2,500Guest
6Stanley McQueen$ 200Guest
7Bryson White$ 200Guest
8Joe Bieber$ 200Guest
Loading...
Show 1 - 0 itemTotal 0 item / 1 Page