Custom Column Rendering

Usage

import MaterialTable from "@material-table/core";

<MaterialTable

// ...

columns={[

{

field: "url",

title: "Avatar",

render: (rowData) => {

return (

<img src={rowData.url} style={{ width: 50, borderRadius: "50%" }} />

);

},

},

]}

/>;

Live Demo

note

See here for more on the GLOBAL_VARS we use in our demos

Live Editor

function RenderImage() { return ( <MaterialTable data={[ { name: "Mehmet", surname: "Baran", birthYear: 1987, birthCity: 63, imageUrl: "https://avatars0.githubusercontent.com/u/7895451?s=460&v=4", }, { name: "Zerya Betül", surname: "Baran", birthYear: 2017, birthCity: 34, imageUrl: "https://avatars0.githubusercontent.com/u/7895451?s=460&v=4", }, ]} columns={[ { title: "Avatar", field: "imageUrl", /** * Custom column rendering */ render: (rowData) => { const styles = { width: 40, borderRadius: "50%" }; return <img src={rowData.imageUrl} style={styles} />; }, }, { title: "Name", field: "name", }, { title: "Surname", field: "surname", }, { title: "Birth Year", field: "birthYear", type: "numeric", }, { title: "Birth Place", field: "birthCity", lookup: { 34: "İstanbul", 63: "Şanlıurfa", }, }, ]} /> ); }

function RenderImage() {
  return (
    <MaterialTable
      data={[
        {
          name: "Mehmet",
          surname: "Baran",
          birthYear: 1987,
          birthCity: 63,
          imageUrl:
            "https://avatars0.githubusercontent.com/u/7895451?s=460&v=4",
        },
        {
          name: "Zerya Betül",
          surname: "Baran",
          birthYear: 2017,
          birthCity: 34,
          imageUrl:
            "https://avatars0.githubusercontent.com/u/7895451?s=460&v=4",
        },
      ]}
      columns={[
        {
          title: "Avatar",
          field: "imageUrl",
          /**
           * Custom column rendering
           */
          render: (rowData) => {
            const styles = { width: 40, borderRadius: "50%" };
            return <img src={rowData.imageUrl} style={styles} />;
          },
        },
        {
          title: "Name",
          field: "name",
        },
        {
          title: "Surname",
          field: "surname",
        },
        {
          title: "Birth Year",
          field: "birthYear",
          type: "numeric",
        },
        {
          title: "Birth Place",
          field: "birthCity",
          lookup: {
            34: "İstanbul",
            63: "Şanlıurfa",
          },
        },
      ]}
    />
  );
}

Result