ReactJs Material-Table Cómo mostrar/ocultar opciones de filtro
Estoy usando el complemento material-Table para mi aplicación reactJS para mostrar la tabla de datos.
Tengo el requisito de mostrar el filtrado en la columna. Pero cuando habilité filtering=true, se crea una fila más en la sección Encabezado debajo del encabezado. Lo que ocupa un espacio innecesario y se muestra siempre.
Quiero ocultar la sección de filtro. Tal vez muestro el ícono de filtro al lado de la columna y cuando hago clic en él, muestre la línea de texto de filtrado. Vi que esta opción está en tablas de reacción tubular. Pero, ¿puedo hacerlo con la tabla de materiales?
Respuestas
No es compatible de forma predeterminada, pero si guarda el estado de filtrado en un estado de uso y lo establece en verdadero, actualice la tabla, así:
function Table(){
const [filtering, setFiltering] = React.useState(false);
retrun <div>
<MaterialTable options={{filtering}}/>
<button onClick={() => {setFiltering(currentFilter => !currentFilter)}}>Show Filtering</button>
</div>
}
Entonces la solución salió como a continuación. (Estoy usando la clase)
En la tabla de materiales, debe agregar un botón para el filtro. que alternará la sección de filtro. También agregue las opciones = {{Filtrado: this.state.filter}}. También necesitamos definir una pequeña función para alternar la bandera.
options={{Filtering: this.state.filter}
actions={[
{
icon: 'filter',
tooltip: 'Enable Filter',
isFreeAction: true,
onClick: (event) => { this.functionName(!this.state.filter)}
}
]}