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",
          },
        },
      ]}
    />
  );
}

Result

Loading...