Skip to main content
Version: 2.xx.xx

Boolean

This field is used to display boolean values. It uses the <Tooltip> values from Ant Design.

Usage​

Let's see how we can use <BooleanField> with the example in the post list.

import { 
List,
Table,
BooleanField,
Icons
} from "@pankod/refine";

export const PostList: React.FC = () => {
const { CloseCircleOutlined, CheckCircleOutlined } = Icons;

return (
<List>
<Table rowKey="id">
...
<Table.Column
dataIndex="status"
title="Published"
render={(value) => (
<BooleanField
value={value === "published"}
trueIcon={<CheckCircleOutlined />}
falseIcon={<CloseCircleOutlined />}
valueLabelTrue="published"
valueLabelFalse="unpublished"
/>
)}
/>
</Table>
</List>
);
};

BooleanField

API Reference​

Properties​

PropertyDescriptionTypeDefault
valueField valueunknown
valueLabelTrueIf there is a value, this is the text to usestring"true"
valueLabelFalseIf there no value, this is the text to usestring"false"
trueIconIf there is a value, this is the icon to useReact.FC | object<CheckOutlined />
falseIconIf there no value, this is the icon to use.React.FC | object<CloseOutlined />
AbstractTooltipPropsAnt Design Tooltip propertiesAbstractTooltipProps