This is documentation for refine 3.xx.xx, which is no longer actively maintained.
Version: 3.xx.xx
Swizzle Ready
This field lets you display markdown content. It supports GitHub Flavored Markdown.
Swizzle
You can swizzle this component to customize it with the refine CLI
Usage
Let's see how we can use <MarkdownField>
in a show page.
Live previews only work with the latest documentation.
import {
useDataGrid,
DataGrid,
GridColumns,
List,
MarkdownField,
} from "@pankod/refine-mui";
const columns: GridColumns = [
{ field: "id", headerName: "ID", type: "number" },
{ field: "title", headerName: "Title", minWidth: 100, flex: 1 },
{
field: "content",
headerName: "Content",
renderCell: function render({ row }) {
return <MarkdownField value={row?.content} />;
},
minWidth: 100,
flex: 2,
},
];
const PostsList: React.FC = () => {
const { dataGridProps } = useDataGrid<IPost>();
return (
<List>
<DataGrid {...dataGridProps} columns={columns} autoHeight />
</List>
);
};
interface IPost {
id: number;
title: string;
content: string;
}
API Reference
Properties
Example
npm create refine-app@latest -- --example input-custom