Dynamické přidání řádku tabulky pomocí React Hook

Úvod

Nedávno jsem měl potřebu dynamicky přidávat řádky tabulky, když uživatel klikne na odkaz v buňce tabulky. Chtěl jsem, aby to vypadalo, že mohu sekci rozbalit a sbalit tak, aby uživatel na požádání viděl další podrobnosti.

Tento krátký příspěvek má mluvit o tomtéž, aby mohl být užitečný pro kohokoli z vás, když to bude potřeba.

TL;DR

Vytvořil jsem projekt Stackblitz, abych to mohl sdílet a demonstrovat. Konečný výsledek vypadá takto:

Zde je projekt Stackblitz, který se podrobně zabývá kódem:

https://stackblitz.com/edit/react-hooks-dynamically-add-table-row-expand-collapse

Kód je také na GitHubu:https://github.com/atapas/react-add-table-dynamic-row

Trochu vysvětlení

Pokud jste obeznámeni s reakcí, měl by být tok kódu snadno srozumitelný. Rád bych zde vysvětlil část kódu:

použijteState Hook ke sledování toho, co bylo utraceno

useState hook od Reactu nám pomáhá sledovat několik stavových proměnných,

  • Mějte přehled o všech rozbalených řádcích. Je to jednoduché pole, které obsahuje id rozbalených řádků.
        // State variable to keep track of all the expanded rows. Example, [1, 2, 3]
       // By default, nothing expanded. Hence initialized with an empty array.
       const [expandedRows, setExpandedRows] = useState([]);
    
  • Sledujte, pokud je řádek aktuálně rozbalený.
      // State variable to keep track which row is currently expanded. Example, {1: true}
      const [expandState, setExpandState] = useState({});
    

Jednoduché operace pole pro přidání/odebrání řádku tabulky

includes() metoda určuje, zda pole obsahuje zadaný prvek. Tato metoda vrací true, pokud pole obsahuje prvek, a false, pokud ne.

Níže uvedený kód určuje, zda je konkrétní řádek rozbalen, zjištěním, zda bylo id zahrnuto do pole.

const isRowExpanded = currentExpandedRows.includes(userId);

Protože při kliknutí na odkaz přepínáme mezi zobrazením a skrytím, potřebujeme níže uvedenou logiku. Pokud je řádek rozšířen, jsme tu, abychom jej skryli. Odstraňte jej proto pomocí filter() metoda. V opačném případě jej přidejte pomocí concat() metoda.

// If the row is expanded, we are here to hide it. Hence remove
// it from the state variable. Otherwise, add to it.

const newExpandedRows = isRowExpanded ?
    currentExpandedRows.filter(id => id !== userId) :
    currentExpandedRows.concat(userId);

Konečně část vykreslování

Nakonec musíme vykreslit dynamický řádek na základě podmínky, pokud je aktuální řádek rozbalen .

{
    expandedRows.includes(user.id) ?
          <tr>
               <td colspan="6">
                   <div>
                         ADD WHATEVER YOU WANT TO RENDER
                   </div>
               </td>
           </tr> : null
 }

Pokud se vám tento článek líbil nebo vám přišel užitečný, připojte se. Najdete mě na Twitteru (@tapasadhikary), kde sdílím myšlenky, tipy a praktiky kódování. Moje stránka GitHub(atapas) uvádí užitečné vedlejší projekty, které by se vám mohly hodit.