在物质用户界面数据中传递图像-网格表

Question

那里。我想在物质ui数据网格表中添加一个图像。但这不管用。我在这里错过了什么？我试图搜索文档，但没有看到任何使用图像的示例。

我的代码

import { DataGrid } from '@material-ui/data-grid';


const columns = [

  {
    field: 'image',
    headerName: 'Image',
    width: 150,
    editable: true,
  },
  {
    field: 'name',
    headerName: 'Name',
    width: 150,
    editable: true,
  },
  

];

const rows = [
  {
    id: 1,
    image: "image URL",
    type: 'image',
    name: 'Cheese Burger',
    price: 10_000,
    menu: 'Daily Menu',
    category: 'Burgers'
  },
  {
    id: 2,
    image: "image URL",
    name: 'Diet Coke',
    price: 10_000,
    menu: 'Daily Menu',
    category: 'Driks'
  },

];

export const ItemsTable = () => {
  return (
    <div style={{ height: 300, width: '100%' }} className="mt-7">
      <DataGrid
        rows={rows}
        columns={columns}
        pageSize={5}
        checkboxSelection
        disableSelectionOnClick
      />
    </div>
  );
}

期望结果

​

，我得到了什么，

​

Answer 1

renderCell支柱允许您将组件注入到DataGrid中，从而创建一列自定义单元格。

https://smartdevpreneur.com/add-buttons-links-and-other-custom-cells-in-material-ui-datagrid/#How_to_Add_Other_Custom_Components

资料-Ui在renderCell上的文档。

https://mui.com/components/data-grid/columns/#render-cell

只需要将值传递到图像组件src。

我制作了一个代码框来显示renderCell的动作。

https://codesandbox.io/s/rendercellgrid-material-demo-edq5p?file=/demo.js

const columns = [

  {
    field: 'image',
    headerName: 'Image',
    width: 150,
    editable: true,
    renderCell: (params) => <img src={params.value} />, // renderCell will render the component
  },
  {
    field: 'name',
    headerName: 'Name',
    width: 150,
    editable: true,
  },
  

];