How can I put the data inside the table?

Question

I am using mui-datatables. I can already retrieve the data correctly. However, I am quite lost on how to display the data address, ID, and name, and date only in the table.

codesandbox link :https://codesandbox.io/s/infallible-feistel-bki5h?file=/src/App.js

This is the data in a JSON format.

[
  {
    name: "Sample Name",
    items: {
      id: "34234242",
      selectedItem: "Item",
      date: { seconds: 1636905600, nanoseconds: 0 },
      item1: true,
      item2: false,
    },
    address: "Ayala",
    email: "sample email",
    phone: "823840820943",
  },
];

Below are the codes.

 const filter = users.filter((d) => d?.items?.item2 == false);
    
  const filtered = selection.filter((f) => f?.items?.date <= new Date());


  return (
    <div>
      {" "}
      <MUIDataTable title={"List"} columns={columns} data={filtered} />
    </div>
  );
};
export default UserTable;

Answer 1

You need columns options where you include address, ID, name, and date. You can also hide column (using display: false) that are included into your column list. please the below example and you can check MUI Datatable documentation too.

import MUIDataTable from "mui-datatables";

const columns = [
 {
  name: "name",
  label: "Name",
  options: {
   filter: true,
   sort: true,
  }
 },
 {
  name: "company",
  label: "Company",
  options: {
   filter: true,
   sort: false,
  }
 },
 {
  name: "city",
  label: "City",
  options: {
   filter: true,
   sort: false,
   display: false,
  }
 },
 {
  name: "state",
  label: "State",
  options: {
   filter: true,
   sort: false,
  }
 },
];

const data = [
 { name: "Joe James", company: "Test Corp", city: "Yonkers", state: "NY" },
 { name: "John Walsh", company: "Test Corp", city: "Hartford", state: "CT" },
 { name: "Bob Herm", company: "Test Corp", city: "Tampa", state: "FL" },
 { name: "James Houston", company: "Test Corp", city: "Dallas", state: "TX" },
];

const options = {
  filterType: 'checkbox',
};

<MUIDataTable
  title={"Employee List"}
  data={data}
  columns={columns}
  options={options}
/>

Update based on your comment

You need to consider two things:

Need to use customBodyRender to show complex json data like items.SelectedItem

{
    name: "items",
    label: "Item",
    options: {
        filter: true,
        sort: true,
        customBodyRender: (value, tableMeta, updateValue) => {
            console.log(value, tableMeta, updateValue, "test");
            return value.selectedItem;
        }
    }
}

Need to use setRowProps to show background color of selected row based on condition. you need options to use setRowProps

const options = {
    filter: true,
    filterType: "dropdown",
    fixedSelectColumn: false,
    rowHover: false,
    setRowProps: (row, dataIndex, rowIndex) => {
      return {
        style: row[1] === "Item" ? { backgroundColor: "skyblue" } : {}
      };
    }
  };

Here is the complete example: Updated Example in Codesandbox