How can change boolean type icons to oposite

Question

I'm want the empty key called archive has the check and with the values "true" has the line icon.

Here is the example: I want the opposite to the column status. Without change the tableIcons.js

Here is the code and codesandbox example:

import React, { useState } from "react";
import { render } from "react-dom";
import MaterialTable from "material-table";
import SaveAltIcon from "@material-ui/icons/SaveAlt";
import tableIcons from "./TableIcons.js";

const rando = max => Math.floor(Math.random() * max);

const rawData = [
  { id: 1111111111, archive: "true", type: "CC" },
  { id: 2222222222, archive: "", type: "RR" },
  { id: 3333333333, archive: "true", type: "CC" },
  { id: 4444444444, archive: "", type: "PS" },
  { id: 5555555555, archive: "true", type: "II" }
];

const columns = [
  { title: "Id", field: "id" },
  { title: "Type", field: "type" },
  { title: "Status", field: "archive", type: "boolean" }
];

const App = () => {
  const [data, setData] = useState(rawData);

  return (
    <MaterialTable
      data={data}
      columns={columns}
      title="Starter Template"
      icons={tableIcons}
    />
  );
};

render(<App />, document.querySelector("#root"));

https://codesandbox.io/s/material-table-starter-template-0s0np?file=/src/index.js

Answer 1

First of all I modified the archive prop value from "true" to true in order to make conditional checks easier, this way the type is boolean instead of string.

Then I imported Check and Remove icons from the depency you were already using:

import { Check, Remove } from "@material-ui/icons";

And finally where the columns const is defined, I pass a function to the render prop, like this:

render: rowdata =>  rowdata.archive !== true ?  <Check /> : <Remove />

Ofcourse you can change the conditional if needed. Link to the Material-Table documentation on this topic here.

This is your code after the modifications:

import React, { useState } from "react";
import { render } from "react-dom";
import MaterialTable from "material-table";
import SaveAltIcon from "@material-ui/icons/SaveAlt";
import tableIcons from "./TableIcons.js";
import { Check, Remove } from "@material-ui/icons";

const rando = (max) => Math.floor(Math.random() * max);

const rawData = [
{ id: 1111111111, archive: true, type: "CC" },
{ id: 2222222222, archive: "", type: "RR" },
{ id: 3333333333, archive: true, type: "CC" },
{ id: 4444444444, archive: "", type: "PS" },
{ id: 5555555555, archive: true, type: "II" },
];

const columns = [
{ title: "Id", field: "id" },
{ title: "Type", field: "type" },
{
    title: "Status",
    field: "archive",
    type: "boolean",
    render: (rowdata) => (rowdata.archive !== true ? <Check /> : <Remove />),
    // the ternary expression above is the same as:
    // if (rowdata.archive !== true) {
    //   return <Check />;
    // } else {
    //   return <Remove />;
    // }
},
//
];

const App = () => {
const [data, setData] = useState(rawData);

return (
    <MaterialTable
    data={data}
    columns={columns}
    title="Starter Template"
    icons={tableIcons}
    />
);
};

render(<App />, document.querySelector("#root"));

Here is the link to the sandbox. I hope this works for you!