Filtro de búsqueda de cuadrícula React

La función Ignite UI for React Search Filter en React Grid permite el proceso de encontrar valores en la recopilación de datos. Facilitamos la configuración de esta funcionalidad y puede implementarse con un cuadro de búsqueda, botones, navegación por teclado y otras funciones útiles para una experiencia de usuario aún mejor. Aunque los navegadores proporcionan funcionalidad nativa de búsqueda de contenido, la mayoría de las veces virtualizanIgrGrid sus columnas y filas que están fuera de la vista. En estos casos, la búsqueda nativa del navegador no puede buscar datos en las celdas virtualizadas, ya que no forman parte del DOM. Hemos ampliado la cuadrícula basada en tablas de React Material con una API de búsqueda que te permite buscar entre el contenido virtualizado de laIgrGrid.

Ejemplo de búsqueda React

El siguiente ejemplo representaIgrGrid un cuadro de entrada de búsqueda que permite buscar en todas las columnas y filas, así como opciones de filtrado específicas para cada columna.

React Search Usage

Configuración de cuadrícula

Comencemos creando nuestra cuadrícula y vinculándola a nuestros datos. ¡También agregaremos algunos estilos personalizados para los componentes que usaremos!

.gridSize {
    --ig-size: var(--ig-size-small);
}

<IgrGrid ref={gridRef} className="gridSize" autoGenerate={false} allowFiltering={true} data={data}>
    <IgrColumn field="IndustrySector" dataType="string" sortable={true}></IgrColumn>
    <IgrColumn field="IndustryGroup" dataType="string" sortable={true}></IgrColumn>
    <IgrColumn field="SectorType" dataType="string" sortable={true}></IgrColumn>
    <IgrColumn field="KRD" dataType="number" sortable={true}></IgrColumn>
    <IgrColumn field="MarketNotion" dataType="number" sortable={true}></IgrColumn>
</IgrGrid>

Genial, ¡y ahora preparémonos para la nuestra APIIgrGrid de búsqueda! Podemos crear algunas propiedades, que pueden usarse para almacenar el texto buscado actualmente y si la búsqueda es sensible a mayúsculas y minúsculas y/o a una coincidencia exacta.

const gridRef = useRef<IgrGrid>(null);
const [caseSensitiveSelected, setCaseSensitiveSelected] = useState<boolean>(false);
const [exactMatchSelected, setExactMatchSelected] = useState<boolean>(false);
const [searchText, setSearchText] = useState('');

React Search Box Input

¡Ahora vamos a crear nuestra entrada de búsqueda! Al vincularsearchText nuestravalue propiedad a nuestra entrada recién creada y suscribirnos alinputOccured evento, podemos detectar cada modificaciónsearchText del usuario. Esto nos permitirá usar losIgrGrid​findNext métodosfindPrev y métodos para resaltar todas las ocurrencias de ysearchText desplazarnos hasta el siguiente/anterior (dependiendo del método que hayamos invocado).

Tanto los métodos comofindNext losfindPrev tienen tres argumentos:

• Text: string (el texto que buscamos)
• (opcional)CaseSensitive: booleano (si la búsqueda es sensible a mayúsculas y minúsculas o no, el valor por defecto es falso)
• (opcional)ExactMatch: booleano (si la búsqueda es exactamente coincidente o no, el valor por defecto es falso)

Al buscar por una coincidencia exacta, la API de búsqueda resaltará como resultados solo los valores de las celdas que coincidan completamente con laSearchText, teniendo también en cuenta la sensibilidad a mayúsculas y minúsculas. Por ejemplo, las cadenas 'software' y 'Software' coinciden exactamente, sin tener en cuenta la sensibilidad de mayúsculas y minúsculas.

Los métodos anteriores devolven un valor numérico (el número de veces que contieneIgrGrid la cadena dada).

const handleOnSearchChange = (event: IgrComponentValueChangedEventArgs) => {
    setSearchText(event.detail);
    nextSearch(event.detail, caseSensitiveSelected, exactMatchSelected);
}

<IgrInput name="searchBox" value={searchText} onInput={handleOnSearchChange}>
</IgrInput>

Agregar botones de búsqueda

Para buscar y navegar libremente entre nuestros resultados, creemos un par de botones invocando losfindNext métodos yfindPrev dentro de los respectivos manejadores de eventos de clic.

const prevSearch = (text: string, caseSensitive: boolean, exactMatch: boolean) => {
    gridRef.current.findPrev(text, caseSensitive, exactMatch);
}

const nextSearch = (text: string, caseSensitive: boolean, exactMatch: boolean) => {
    gridRef.current.findNext(text, caseSensitive, exactMatch);
}

<IgrIconButton variant="flat" name="prev" collection="material" onClick={() => prevSearch(searchText, caseSensitiveSelected, exactMatchSelected)}>
</IgrIconButton>
<IgrIconButton variant="flat" name="next" collection="material" onClick={() => nextSearch(searchText, caseSensitiveSelected, exactMatchSelected)}>
</IgrIconButton>

Agregar búsqueda de teclado

También podemos permitir que los usuarios naveguen por los resultados usando las flechas del teclado y la ENTER tecla. Para lograr esto, podemos gestionar el evento de keydown de nuestra entrada de búsqueda impidiendo el movimiento predeterminado del cursor de la entrada con elPreventDefault método e invocar elfindNext /findPrev métodos dependiendo de la tecla que haya pulsado el usuario.

const searchKeyDown = (e: KeyboardEvent<HTMLElement>) => {
    if (e.key === 'Enter') {
        e.preventDefault();
        nextSearch(searchText, caseSensitiveSelected, exactMatchSelected);
    } else if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
        e.preventDefault();
        prevSearch(searchText, caseSensitiveSelected, exactMatchSelected);
    }
}

 <div onKeyDown={searchKeyDown}>
    <IgrInput name="searchBox" value={searchText} onInput={handleOnSearchChange}></IgrInput>
</div>

Distingue entre mayúsculas y minúsculas y coincidencia exacta

Ahora permitamos al usuario elegir si la búsqueda debe ser sensible a mayúsculas y minúsculas y/o con una coincidencia exacta. Para este propósito podemos usar elIgrChip componente junto con una variable de estado booleana para indicar si el IgrChip está seleccionado.

const [caseSensitiveSelected, setCaseSensitiveSelected] = useState<boolean>(false);
const [exactMatchSelected, setExactMatchSelected] = useState<boolean>(false);

const handleCaseSensitiveChange = (event: IgrComponentBoolValueChangedEventArgs) => {
    setCaseSensitiveSelected(event.detail);
    nextSearch(searchText, event.detail, exactMatchSelected);
}

const handleExactMatchChange = (event: IgrComponentBoolValueChangedEventArgs) => {
    setExactMatchSelected(event.detail);
    nextSearch(searchText, caseSensitiveSelected, event.detail);
}

<IgrChip selectable={true} onSelect={handleCaseSensitiveChange}>
    <span>Case Sensitive</span>
</IgrChip>
<IgrChip selectable={true} onSelect={handleExactMatchChange}>
    <span>Exact Match</span>
</IgrChip>

Persistencia

¿Y si quisiéramos filtrar y ordenar nuestrosIgrGrid registros o incluso añadir y eliminar registros? Tras estas operaciones, los puntos destacados de nuestra búsqueda actual se actualizan y persisten automáticamente sobre cualquier texto que coincida con elSearchText! Además, la búsqueda funcionará con paginación y mantendrá los resaltados mediante cambios enIgrGrid la propiedad.PerPage​

Adición de iconos

Al utilizar algunos de nuestros otros componentes, podemos crear una interfaz de usuario enriquecida y mejorar el diseño general de toda nuestra barra de búsqueda. Podemos tener un bonito icono de búsqueda o eliminación a la izquierda de la entrada de búsqueda, un par de fichas para nuestras opciones de búsqueda y algunos iconos de diseño de materiales combinados con bonitos botones de estilo ondulado para nuestra navegación a la derecha.

Empecemos creando los botones de búsqueda a la derecha de la entrada añadiendo dos botones de estilo ondulado con iconos de material. Los manejadores para los eventos de clic siguen siendo los mismos: invocar losfindNext métodosfindPrev (o/métodos).

• Para mostrar un par de chips que desactivan lasCaseSensitive propiedades yExactMatch de . Hemos reemplazado las casillas de verificación por dos chips elegantes. Cada vez que se hace clic en un chip, invocamos a su respectivo manejador.

const prevSearch = (text: string, caseSensitive: boolean, exactMatch: boolean) => {
    gridRef.current.findPrev(text, caseSensitive, exactMatch);
}

const nextSearch = (text: string, caseSensitive: boolean, exactMatch: boolean) => {
    gridRef.current.findNext(text, caseSensitive, exactMatch);
}

<div slot="suffix">
    <IgrIconButton variant="flat" name="prev" collection="material" onClick={() => prevSearch(searchText, caseSensitiveSelected, exactMatchSelected)}>
        <IgrRipple></IgrRipple>
    </IgrIconButton>
    <IgrIconButton variant="flat" name="next" collection="material" onClick={() => nextSearch(searchText, caseSensitiveSelected, exactMatchSelected)}>
        <IgrRipple></IgrRipple>
    </IgrIconButton>
</div>

Ahora agreguemos los iconos de búsqueda y borrado a la izquierda de la entrada:

const clearSearch = () => {
    setSearchText('');
    gridRef.current.clearSearch();
}

<div slot="prefix">
    {searchText.length === 0 ? (
        <IgrIconButton variant="flat" name="search"  collection="material">
        </IgrIconButton>
        ) : (
        <IgrIconButton variant="flat" name="clear" collection="material" onClick={clearSearch}>
        </IgrIconButton>
    )}
</div>

Finalmente, este es el resultado final cuando combinamos todo:

useEffect(() => {
    registerIconFromText("search", searchIconText, "material");
    registerIconFromText("clear", clearIconText, "material");
    registerIconFromText("prev", prevIconText, "material");
    registerIconFromText("next", nextIconText, "material");
}, []);

<IgrInput name="searchBox" value={searchText} onInput={handleOnSearchChange}>
    <div slot="prefix">
        {searchText.length === 0 ? (
            <IgrIconButton variant="flat" name="search"  collection="material">
            </IgrIconButton>
            ) : (
            <IgrIconButton variant="flat" name="clear" collection="material" onClick={clearSearch}>
            </IgrIconButton>
        )}
    </div>
    <div slot="suffix">
        <IgrIconButton variant="flat" name="prev" collection="material" onClick={() => prevSearch(searchText, caseSensitiveSelected, exactMatchSelected)}>
            <IgrRipple></IgrRipple>
        </IgrIconButton>
        <IgrIconButton variant="flat" name="next" collection="material" onClick={() => nextSearch(searchText, caseSensitiveSelected, exactMatchSelected)}>
            <IgrRipple></IgrRipple>
        </IgrIconButton>
    </div>
</IgrInput>

Limitaciones conocidas

Limitación	Descripción
Buscando en celdas con una plantilla	Las funciones destacadas de búsqueda funcionan solo para las plantillas de celda predeterminadas. Si tiene una columna con una plantilla de celda personalizada, los resaltados no funcionarán, por lo que deberá utilizar enfoques alternativos, como un formateador de columnas, o configurar elsearchable propiedad en la columna a falso.
Virtualización remota	La búsqueda no funcionará correctamente al utilizar la virtualización remota
Celdas con texto cortado	Cuando el texto en la celda es demasiado grande para caber y el texto que estamos buscando está cortado por los puntos suspensivos, aún nos desplazaremos hasta la celda y la incluiremos en el recuento de coincidencias, pero no se resaltará nada.

Referencias de API

En este artículo hemos implementado nuestra propia barraIgrGrid de búsqueda con algunas funcionalidades adicionales para navegar entre los resultados de búsqueda. También usamos algunos componentes adicionales de Ignite UI for React como iconos, chips y entradas. La API de búsqueda se muestra a continuación.

IgrGrid methods:

• findNext
• findPrev
• clearSearch
• refreshSearch

IgrColumn properties:

• searchable

Componentes adicionales con API relativas que se utilizaron:

• IgrIcon
• IgrChip

Recursos adicionales

• Virtualización y rendimiento
• Filtración
• Paginación
• Clasificación
• resúmenes
• Columna en movimiento
• Fijación de columnas
• Cambio de tamaño de columna
• Selección

Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.

• Ignite UI for React Forums
• Ignite UI for React GitHub