0
215
Vistas¿Puedo hacer que una columna de tabla de materiales represente datos como este?
Estoy usando una tabla de materiales estándar. Me gustaría representar el status de la columna como en la imagen de abajo. Podría usar ANT Design para hacer esto, pero Material-Table requiere mucho menos código para permitir la búsqueda y el filtrado.
Aquí hay un ejemplo muy simple de mi tabla. Estoy usando algunas options para establecer el color del encabezado, la fuente, etc. También estoy usando rowStyle para alternar colores en cada fila.
const [intakes, setIntakes] = useState([]); const columns = [ { title: "Status", field: "Status" }, ]; function Table() { return ( <MaterialTable data={intakes.intakes} columns={columns} /> ); } 
1 Respuestas
Responde la pregunta0
En la definición de sus columnas, deberá usar la propiedad de representación del objeto de columna. Una pregunta similar está aquí
ejemplo de código:
<MaterialTable columns={[ { title: "Name", field: "name" }, { title: "Surname", field: "surname" }, { title: "Id", field: "tableData.id" }, { title: "Id+1", render: rowData => rowData.tableData.id + 1 }, ]}/>Esta es la parte importante aquí:
render: rowData => rowData.tableData.id + 1usando rowData, puede llamar a una función aquí usando un campo específico que no sea la identificación en el ejemplo (digamos
render: rowData => generateFlagText(rowData.tableData.Status)Y su función debería devolver algunos div con classNames para mostrar esos estados