Hola, estoy tratando de agregar un <label></label> a cada celda de la tabla. Estoy usando la tabla de materiales aquí:https://material-table.com/#/docs/features/component-overriding
Intenté así:
<Table onChangePage={handleChangePage} page={props.currentPage} totalCount={props.totalCount} options={{ paging:true, pageSizeOptions:[10, 15, 25, 50], pageSize: props.rowsPerPage, padding: "dense", search: false, toolbar:false, headerStyle: TableHeaderRow, <--- cssproperties rowStyle:TableRow <--- cssproperties }} columns={columns} <--- variable columns:TableColumn[] data={dataAct} <---- data generated from API /> En realidad, headerStyle el estilo de encabezado en las opciones, pero lo que realmente quiero es agregar un
<label> headerValueHere} </label>para cada encabezado.
Agregué una etiqueta de etiqueta a las celdas como usar render en la definición de columnas:
const getDocumentTypeForRow = rowData => { return ( <Tooltip title={rowData}> <label style={OpenVulnerabilityDuePatchingCardDetailsElementLabel}> {rowData} </label> </Tooltip> ) }; const columns: TableColumn<>[] = [ { title: 'Due Date', field: 'remediation_due_date', render: data => getDocumentTypeForRow(data.remediation_due_date) }, ]Pero, ¿cómo hacer esto para los encabezados?
Puede pasar JSX o HTML al título
const columns: TableColumn<>[] = [ { title: <label>Due Date</label>, field: 'remediation_due_date', render: data => getDocumentTypeForRow(data.remediation_due_date) }, ]Puede editar en vivo aquí y ver los resultados.
https://material-table.com/#/docs/features/styling
columns={[ { title: <h1>Heading 1</h1>, field: 'name', cellStyle: { backgroundColor: '#039be5', color: '#FFF' }, headerStyle: { backgroundColor: '#039be5', } }, { title: 'Surname', field: 'surname' }, { title: 'Birth Year', field: 'birthYear', type: 'numeric' }, { title: 'Birth Place', field: 'birthCity', lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' }, }, ]}