Estoy usando tablas de datos mui. Ya puedo recuperar los datos correctamente. Sin embargo, estoy bastante perdido sobre cómo mostrar la address de datos, la ID y el name , y la date solo en la tabla.
enlace de codesandbox: https://codesandbox.io/s/infallible-feistel-bki5h?file=/src/App.js
Estos son los datos en formato JSON.
[ { name: "Sample Name", items: { id: "34234242", selectedItem: "Item", date: { seconds: 1636905600, nanoseconds: 0 }, item1: true, item2: false, }, address: "Ayala", email: "sample email", phone: "823840820943", }, ];A continuación se muestran los códigos.
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;Necesita opciones de columns donde incluya address , ID , name y date . También puede hide columnas (usando display: false ) que están incluidas en su lista de columnas. por favor, el siguiente ejemplo y también puede consultar la documentación de MUI Datatable .
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} />Actualización basada en tu comentario
Tienes que tener en cuenta dos cosas:
Necesita usar customBodyRender para mostrar datos json complejos como items.SelectedItem
{ name: "items", label: "Item", options: { filter: true, sort: true, customBodyRender: (value, tableMeta, updateValue) => { console.log(value, tableMeta, updateValue, "test"); return value.selectedItem; } } } Necesita usar setRowProps para mostrar el color de fondo de la fila seleccionada según la condición. necesitas opciones para usar setRowProps
const options = { filter: true, filterType: "dropdown", fixedSelectColumn: false, rowHover: false, setRowProps: (row, dataIndex, rowIndex) => { return { style: row[1] === "Item" ? { backgroundColor: "skyblue" } : {} }; } };Aquí está el ejemplo completo:Ejemplo actualizado en Codesandbox