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"
>
</span>
<span className="text-primary fw-600">
{">"} {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"
>
</span>
<span className="text-primary fw-600">
{">"} {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?
Share Improve this question edited Nov 18, 2024 at 11:22 jonrsharpe 122k30 gold badges268 silver badges476 bronze badges asked Nov 18, 2024 at 11:18 Zaheer BashirZaheer Bashir 1081 silver badge8 bronze badges1 Answer
Reset to default 0You 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.