Currently, I am utilizing the `antd` Description components.
In this scenario, when there is no `title` for the items, the value should be aligned to the left. You can see an example of this alignment in the image below:
I have attempted to fix this issue without success. Can you provide guidance on how to resolve it?
Here is a snippet from 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;
You can also view the code on Codesandbox:
https://codesandbox.io/s/border-antd-4-23-6-forked-5rr8eh?file=/demo.tsx