Муравей дизайн 4 стола строки фона

Я использую свой проект реакции для таблицы дизайна муравьев 4, кто-нибудь знает, как добавить цвет фона для строки и столбца таблицы дизайна муравьев,

Спасибо

как это  пример изображения

stazkblitz здесь

часть кода здесь

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'));

person core114    schedule 25.09.2020    source источник


Ответы (1)


Для столбца вы можете использовать только prop className в каждом элементе columns.

Например:

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',
  },
];

Для строки вы можете использовать rowClassName в своем компоненте Table, как это:

<Table rowClassName="bg-red"/>
person Raman Nikitsenka    schedule 25.09.2020