API Reference
Advanced Tutorials
Comparison
FAQ
Contributing
Testing
Migration Guide
Licence
This is documentation for Refine 3.xx.xx, which is no longer actively maintained.
For up-to-date documentation, see the latest version (4.xx.xx).
Version: 3.xx.xx
Swizzle Ready
File
This field is used to display files and it uses the <Link>
component of <Typography>
from Material UI.
Swizzle
You can swizzle this component to customize it with the refine CLI
Usage
Let's see how we can use <FileField>
with the example in the edit page.
localhost:3000/posts
Live previews only work with the latest documentation.
import {
useDataGrid,
DataGrid,
GridColumns,
List,
FileField,
} from "@pankod/refine-mui";
const columns: GridColumns = [
{ field: "id", headerName: "ID", type: "number" },
{ field: "title", headerName: "Title", minWidth: 100, flex: 1 },
{
field: "image",
headerName: "Image",
renderCell: function render({ row }) {
return (
<FileField src={row.image[0].url} target="_blank" rel="noopener" />
);
},
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;
image: [
{
url: string;
},
];
}
TIP
If you don't use title
prop it will use src
as title
Was this helpful?
API Reference
Properties
External Props
It also accepts all props of Material UI Link.
Was this helpful?