Jak vytvořit přizpůsobenou dynamickou tabulku v Reactu (s dynamickou hlavičkou)

Dobrý den! 👋😊

V sekci komentářů pod mým předchozím příspěvkem byla docela diskuse o vytvoření dynamičtějšího řešení pro dynamické tabulky v Reactu, takže jsme tady! 🚀

Než začneme , velmi bych vám doporučil, abyste si prohlédli spustitelné příklady pro řešení na našem webu:
Jak vytvořit přizpůsobenou dynamickou tabulku v Reactu (s dynamickou hlavičkou)

Konečný efekt tohoto příspěvku:

V níže uvedeném příkladu jsem použil následující koncept:

• tabulka je popsána sloupci a vlastnostmi dat,
• tabulka se skládá ze záhlaví a některých datových záznamů,
• column pole nám umožňuje rozhodnout, které názvy sloupců chceme zobrazit v datových řádcích, 
• pomocí map() jsme schopni snížit množství kódu – sloupce a datová pole jsou mapována do komponent React.

Pamatujte, že každý záznam by měl mít jedinečný klíč 🗝️ - pomáhá Reactu optimálně řídit změny v DOM. Takový klíč může být například path přiřazené ke každému prvku tabulky.

Praktický příklad:

import React from 'react';

const tableStyle = {
    border: '1px solid black',
    borderCollapse: 'collapse',
    textAlign: 'center',
    width: '100%'
}

const tdStyle = {
    border: '1px solid #85C1E9',
    background: 'white',
    padding: '5px'
};

const thStyle = {
    border: '1px solid #3498DB',
    background: '#3498DB',
    color: 'white',
    padding: '5px'
};

const Table = ({ id, columns, data }) => (
  <table style={tableStyle}>
    <tbody>
      <tr>
        {columns.map(({ path, name }) => (
          <th style={thStyle} key={path}>{name}</th>
        ))}
      </tr>
      {data.map((rowData) => (
        <tr key={rowData[id]}>
          {columns.map(({ path }) => (
            <td style={tdStyle} key={path}>
              {rowData[path]}
            </td>
          ))}
        </tr>
      ))}
    </tbody>
  </table>
);

// Example use --------------------

const App = () => {
  const columns = [
    { path: "id",   name: "ID" },
    { path: "name", name: "Name" },
    { path: "age",  name: "Age" },
    { path: "favFruit",  name: "Favourite Fruit" },
  ];
  const data = [
    { id: 1, name: 'Kate',  age: 25, favFruit: '🍏' },
    { id: 2, name: 'Tom',   age: 23, favFruit: '🍌' },
    { id: 3, name: 'Ann',   age: 26, favFruit: '🍊' },
    { id: 4, name: 'Jack',  age: 21, favFruit: '🍒' }
  ];

  return (
    <div>
      <Table id="id" columns={columns} data={data} />
    </div>
  );
};

export default App;

Tento příklad můžete spustit zde

Pokud jste našli toto řešení užitečné, můžete reagovat na tento příspěvek nebo zanechat komentář a dát mi vědět, co si myslíte. 💬
Díky za váš čas! 😊

Napište nám! ✉

Pokud máte nějaký problém k vyřešení nebo otázky, na které nikdo nedokáže odpovědět v souvislosti s tématem React nebo JavaScript, nebo hledáte mentoring, napište nám na dirask.com -> Otázky