Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

263
Vistas
Antd Table Search and Reset functions not functioning

I am trying to implement search and reset functions in Antd table. The reset(clearAll) function is not returning the table back to its initial state when clicked. The search code blocks logs these errors on the console === >

     TS2322: Type 'any[]' is not assignable to type 'undefined'.
     280 |   };
     281 |   const globalSearch = () => {
   > 282 |     filteredValue = modifiedData.filter(value => {
    |     ^^^^^^^^^^^^^
     283 |       return (
     284 |         value.name.toLowerCase().includes(searchText.toLowerCase()) ||
  

And

    TS2339: Property 'length' does not exist on type 'never'.
     319 |             }}
     320 |             columns={mergedColumns}
   > 321 |             dataSource={filteredValue && filteredValue.length ? filteredValue : 
     modifiedData}
    |                                                        ^^^^^^

These are the codes

     const [sortedInfo, setSortedInfo] = useState({});  
     const [searchText, setSearchText] = useState('');
     let [filteredValue] = useState();

Code block for resetting the table

const clearAll = () => {
setSortedInfo({});       ===> coming from the sorted Values
setSearchText('');
loadData();           ====> Data from the API loads when useEffect is called
};

Code block for Search

      const handleSearch = e => {
      setSearchText(e.target.value);
      if (e.target.value === '') {
       loadData();
      }
     };
     const globalSearch = () => {
     filteredValue = modifiedData.filter(value => {
      return (
      value.name.toLowerCase().includes(searchText.toLowerCase()) ||
      value.tankThreatLevelColor.toLowerCase().includes(searchText.toLowerCase())
     );
      });
     setGridData(filteredValue);
    };

In the jsx

      <Space style={{ marginBottom: 16 }}>
      <Input placeholder="Enter Search Text" onChange={handleSearch} type="text" allowClear 
       value={searchText} />
      <Button type="primary" onClick={globalSearch}>
        Search
      </Button>
      <Button onClick={clearAll}>Reset Table</Button>
      </Space>

        <Table
        components={{
          body: {
            cell: EditableCell,
          },
        }}
        columns={mergedColumns}
        dataSource={filteredValue && filteredValue.length ? filteredValue : modifiedData}
        bordered
        
      />

Much Gratitude in anticipation 🙏🏾

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Update your globalSearch() with following code.

replace

value.tankThreatLevelColor.toLowerCase().includes(searchText.toLowerCase())

with

value.username.toLowerCase().includes(searchText.toLowerCase())

as there is no column with name tankThreatLevelColor

Error screenshot

Update your globalSearch() with following code.

const globalSearch = () => {
    filteredValue = modifiedData.filter((value) => {
    return (
      value.name.toLowerCase().includes(searchText.toLowerCase()) ||
      value.username.toLowerCase().includes(searchText.toLowerCase())
    );
  });
    setGridData(filteredValue);
 };

Search by name result:

Screenshot

Search by username result:

Screenshot

After reset: Screenshot

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda