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 '@acrool/js-utils/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
1	Jack Wu	$ 200	Admin
2	Imagine Chiu	$ 99	Guest
3	Jason Dinwiddie	$ 880	Manage
4	Gloria Lu	$ 12,300	Guest
5	Adam Bolton	$ 2,500	Guest
6	Stanley McQueen	$ 200	Guest
7	Bryson White	$ 200	Guest
8	Joe Bieber	$ 200	Guest
	Footer Name

Show 1 - 0 itemTotal 0 item / 1 Page