javascript - How to Add Borders to Table Rows (Including Expanded Rows) in Ant Design When CSS Overrides Don’t Work? - Stack Ove

admin管理员组

文章数量:1434929

I'm working with an Ant Design table that includes expandable rows. The table works as expected, but I noticed that none of the rows (main or expanded) have borders, and I’d like to add borders to make the table more visually structured. However, I'm unsure how to do this without breaking the table layout or conflicting with Ant Design's default styles.

The main table rows and the rows in the expanded nested table don't have borders. I want to add borders to all rows (both main and expanded tables).

Here's the code I’m using:

 return (
    <>
      <Row  className="margin-bottom-m" gutter={[0, 10]} align="middle">
      <Col span={24}>
          <Row className="text-gray breadcrumb">
            <span onClick={() => history.push("/decarbonization/facilities")} className="c-pointer">
              Facilities
            </span>
              <>
                <span
                  onClick={() => history.push(`/user/${facility_id}`)}
                  className="c-pointer"
                >
                  &nbsp;
                </span>
                <span className="text-primary fw-600">
                  &nbsp;&nbsp;{">"} {form.getFieldValue('facility_name')}
                </span>
              </>
          </Row>
        </Col>
      </Row>
      
      <Row>
        <Col span={24}>
      <Form 
        form={form} 
        layout="vertical" 
        name="add_facility_form"
        validateTrigger={['onSubmit', 'onBlur', 'onChange']}
        onFinish={(e) => onFinish(e)}
      >
        <Col className='formstyle1'>
        <Row gutter={16}>
          <Col span={18}>
            <Form.Item
              name="facility_name"
              label={t('general.facilityName')}
              rules={[{ required: true, message: `${t('general.pleaseInputTheFacilityName')}}!` }]}
            >
              <Input placeholder= {t('general.facilityName')} />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={9}>
            <Form.Item  name="facility_address"
              label= {t('general.address')}>
              <GooglePlacesAutocomplete
                    form={form}
                    usage={"facilities"}
                  />
            </Form.Item>
          </Col>
          <Col span={9}>
            <Form.Item name="country" label= {t('general.country')} rules={[{ required: true, message: t('general.pleaseSelectACountry') }]}>            
              <Select placeholder={t('general.country')} onChange={handleChangeCountry} allowClear showSearch>
                {Countries.country().map((val:any, i:any) => (
                  <Option key={i} value={val}>
                    {val}
                  </Option>
                ))}
              </Select>
            </Form.Item>
          </Col>
        </Row>
        </Col>
        <Divider />
      
        <Table
          className="custom-table" 
          columns={electricityColumns}
          dataSource={electricityUsageData}
          components={components}
          rowClassName={() => 'table-row'}
          tableLayout="fixed"
          footer={() => (
            <Row>
              <Button onClick={() => addYearData(getPreviousYear())} disabled={isPreviousYearDisabled()} icon={<PlusOutlined  className='addButton' />} type="link">
                Add {getPreviousYear()} data
              </Button>
            </Row>
          )}
          expandable={{
            expandedRowRender: (record) => (
              <Table
                columns={purchaseColumns}
                dataSource={record.purchases}
                pagination={false}
                bordered={false}
                tableLayout="fixed"
              />
            ),
          }}
          pagination={false}
        />
    
        <Row justify="end">
          <Space style={{ margin: '20px 0px 0px 0px' }} wrap={true}>
            <Form.Item>
              <Button type="primary" htmlType="submit" icon={<SaveOutlined />}>
                SAVE
              </Button>
            </Form.Item>
          </Space>
        </Row>
      </Form>
      </Col>
      </Row>
      <DynamicDialog
        visibility={isModalVisible}
        onSetVisibility={setIsModalVisible}
        onCancel={handleCancel}
        content={{
          component: 
          <AddExternalEacModal 
          handleSave={handleSave} 
          handleCancel={handleCancel} 
          facilityName={facilityName} 
          selectedYear={year}
          technologies={technologies}
          />,
          footer: null,
          width: 550
      }}
        closable={true}
        className="external-eac-modal"
      />
      <DynamicInfoModal visible={openInfo} setVisible={setOpenInfo} {...infoConfig} />

      </>
  );

What's the best way to add borders to rows while keeping the table layout intact? Is there a way to customize Ant Design styles directly for this, or should I rely on CSS overrides?

I'm working with an Ant Design table that includes expandable rows. The table works as expected, but I noticed that none of the rows (main or expanded) have borders, and I’d like to add borders to make the table more visually structured. However, I'm unsure how to do this without breaking the table layout or conflicting with Ant Design's default styles.

The main table rows and the rows in the expanded nested table don't have borders. I want to add borders to all rows (both main and expanded tables).

Here's the code I’m using:

 return (
    <>
      <Row  className="margin-bottom-m" gutter={[0, 10]} align="middle">
      <Col span={24}>
          <Row className="text-gray breadcrumb">
            <span onClick={() => history.push("/decarbonization/facilities")} className="c-pointer">
              Facilities
            </span>
              <>
                <span
                  onClick={() => history.push(`/user/${facility_id}`)}
                  className="c-pointer"
                >
                  &nbsp;
                </span>
                <span className="text-primary fw-600">
                  &nbsp;&nbsp;{">"} {form.getFieldValue('facility_name')}
                </span>
              </>
          </Row>
        </Col>
      </Row>
      
      <Row>
        <Col span={24}>
      <Form 
        form={form} 
        layout="vertical" 
        name="add_facility_form"
        validateTrigger={['onSubmit', 'onBlur', 'onChange']}
        onFinish={(e) => onFinish(e)}
      >
        <Col className='formstyle1'>
        <Row gutter={16}>
          <Col span={18}>
            <Form.Item
              name="facility_name"
              label={t('general.facilityName')}
              rules={[{ required: true, message: `${t('general.pleaseInputTheFacilityName')}}!` }]}
            >
              <Input placeholder= {t('general.facilityName')} />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={9}>
            <Form.Item  name="facility_address"
              label= {t('general.address')}>
              <GooglePlacesAutocomplete
                    form={form}
                    usage={"facilities"}
                  />
            </Form.Item>
          </Col>
          <Col span={9}>
            <Form.Item name="country" label= {t('general.country')} rules={[{ required: true, message: t('general.pleaseSelectACountry') }]}>            
              <Select placeholder={t('general.country')} onChange={handleChangeCountry} allowClear showSearch>
                {Countries.country().map((val:any, i:any) => (
                  <Option key={i} value={val}>
                    {val}
                  </Option>
                ))}
              </Select>
            </Form.Item>
          </Col>
        </Row>
        </Col>
        <Divider />
      
        <Table
          className="custom-table" 
          columns={electricityColumns}
          dataSource={electricityUsageData}
          components={components}
          rowClassName={() => 'table-row'}
          tableLayout="fixed"
          footer={() => (
            <Row>
              <Button onClick={() => addYearData(getPreviousYear())} disabled={isPreviousYearDisabled()} icon={<PlusOutlined  className='addButton' />} type="link">
                Add {getPreviousYear()} data
              </Button>
            </Row>
          )}
          expandable={{
            expandedRowRender: (record) => (
              <Table
                columns={purchaseColumns}
                dataSource={record.purchases}
                pagination={false}
                bordered={false}
                tableLayout="fixed"
              />
            ),
          }}
          pagination={false}
        />
    
        <Row justify="end">
          <Space style={{ margin: '20px 0px 0px 0px' }} wrap={true}>
            <Form.Item>
              <Button type="primary" htmlType="submit" icon={<SaveOutlined />}>
                SAVE
              </Button>
            </Form.Item>
          </Space>
        </Row>
      </Form>
      </Col>
      </Row>
      <DynamicDialog
        visibility={isModalVisible}
        onSetVisibility={setIsModalVisible}
        onCancel={handleCancel}
        content={{
          component: 
          <AddExternalEacModal 
          handleSave={handleSave} 
          handleCancel={handleCancel} 
          facilityName={facilityName} 
          selectedYear={year}
          technologies={technologies}
          />,
          footer: null,
          width: 550
      }}
        closable={true}
        className="external-eac-modal"
      />
      <DynamicInfoModal visible={openInfo} setVisible={setOpenInfo} {...infoConfig} />

      </>
  );

What's the best way to add borders to rows while keeping the table layout intact? Is there a way to customize Ant Design styles directly for this, or should I rely on CSS overrides?

• javascript
• reactjs
• antd
• ant-design-pro

Share Improve this question Follow edited Nov 18, 2024 at 11:22 jonrsharpe 122k3030 gold badges268268 silver badges476476 bronze badges asked Nov 18, 2024 at 11:18 Zaheer BashirZaheer Bashir 10811 silver badge88 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

You can modify table styles by customize component token. Just wrapping the table component with <ConfigProvider> from antd and change the token value. See the design component token list from table component. I created a StackBlitz with the code bellow to see this working on an example.

<ConfigProvider
  theme={{
    components: {
      Table: {
        borderColor: '#f00',
      },
    },
  }}
>
  <Table
    columns={columns}
    expandable={{
      expandedRowRender: (record) => (
        <p style={{ margin: 0 }}>
          {record.description}
        </p>
      ),
      rowExpandable: (record) => record.name !== 'Not Expandable',
    }}
    dataSource={data}
  />
</ConfigProvider>

You can put the <ConfigProvider> wrapping your application to apply the custom styles for all tables on your app.

本文标签：