Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

267
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda