CODEWITHSUNDEEP
antdreact-typescript
core114
core114

Reputation: 5325

Ant design 4 table row background

Im using my react project for ant design 4 table, anyone know how to adding background color for ant design table row and col,

Thanks

like this example image

stazkblitz here

code part here

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    render: text => <a>{text}</a>,
  },
  {
    title: 'Book',
    dataIndex: 'book',
    key: 'book',
  },
  {
    title: 'Pen',
    dataIndex: 'pen',
    key: 'pen',
  },
  {
    title: 'Tools',
    key: 'tools',
    dataIndex: 'tools',

  },
  {
    title: 'Total',
    key: 'total',
       dataIndex: 'total',
  },
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    book: <Form.Item name="book1"  rules={[{required: true, message: " is required"}]}><Input style={{width: 150}}/></Form.Item>,
    pen: <Form.Item name="oen1"  rules={[{required: true, message: "is required"}]}><Input style={{width: 150}}/></Form.Item>,
   tools: <Form.Item name="tools1"  rules={[{required: true, message: " is required"}]}><Input style={{width: 150}}/></Form.Item>,
   total:'00000'
  },

];
 const onFinish = values => {
    console.log(values);
  };
ReactDOM.render( 
  <div> 
    <Form name="control-hooks" onFinish={onFinish}>
      <Table columns={columns} dataSource={data} />
      <div>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            Submit
          </Button>
        </Form.Item>
      </div>
    </Form>
  </div>, document.getElementById('container'));

Upvotes: 1

Views: 3109

Answers (1)

Oro
Oro

Reputation: 2586

For column, you can use just prop className in every item of columns.

For instance:

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    className: 'bg-red',
    render: text => <a>{text}</a>,
  },
  {
    title: 'Book',
    dataIndex: 'book',
    key: 'book',
  },
  {
    title: 'Pen',
    dataIndex: 'pen',
    key: 'pen',
  },
  {
    title: 'Tools',
    key: 'tools',
    dataIndex: 'tools',

  },
  {
    title: 'Total',
    className: 'bg-green',
    key: 'total',
       dataIndex: 'total',
  },
];

For row, you can use rowClassName in your Table component, just like this:

<Table rowClassName="bg-red"/>

Upvotes: 1

Related Questions