Search code examples
javascriptcssreactjstypescriptantd

antd - how to horizontal align the Description Item components

I'm using antd Description components.

The logic is when there is no title for the items, the value should be aligned to the left, as attached below. enter image description here

I've tried to apply fix on that but not successful. How can I fix it?

demo.tsx

import React from "react";
import "antd/dist/antd.css";
import "./index.css";
import { Descriptions } from "antd";

const App: React.FC = () => {
  const items = [
    { title: "title 1", value: "value-1" },
    { title: "title 2", value: "value-2" },
    { value: "value-3" }
  ];
  return (
    <Descriptions column={1} bordered>
      {items.map((description, index) =>
        description.title ? (
          <Descriptions.Item
            key={index}
            label={description.title}
            labelStyle={{ width: "25%" }}
          >
            {description.value}
          </Descriptions.Item>
        ) : (
          <div key={index}>{description.value}</div>
        )
      )}
    </Descriptions>
  );
};

export default App;

Codesandbox:
https://codesandbox.io/s/border-antd-4-23-6-forked-5rr8eh?file=/demo.tsx

Solution

  • The Description Item component cannot be merged except chaging its style. There are several ways to change CSS of antd, you can override it by using CSS file or playing their game. Here is my solution. It's bad but maybe work.

    <Descriptions column={1} bordered>
  {items.map((description, index) => (
    <Descriptions.Item
      key={index}
      label={description.title ? description.title : description.value}
      labelStyle={
        description.title
          ? { width: "30%" }
          : { backgroundColor: "white", borderRight: "none" }
      }
    >
      {description.title && description.value}
    </Descriptions.Item>
  ))}
</Descriptions>