React에서 맞춤형 동적 테이블을 생성하는 방법(동적 헤더 포함)

안녕하세요! 👋😊

my 아래의 댓글 섹션에는 React에서 동적 테이블을 위한 보다 동적인 솔루션을 만드는 것에 대한 상당한 토론이 있었습니다. 그래서 여기까지입니다! 🚀

시작하기 전에 웹 사이트에서 솔루션에 대한 실행 가능한 예제를 확인하는 것이 좋습니다.
How to create customized dynamic table in React (with dynamic header)

이 게시물의 최종 효과:


아래 예에서는 다음 개념을 사용했습니다.

테이블은 열 및 데이터 속성으로 설명됩니다.

테이블은 헤더와 일부 데이터 레코드로 구성됩니다.

column 배열을 사용하면 데이터 행에 표시할 열 이름을 결정할 수 있습니다.

map() 함수를 사용하면 코드의 양을 줄일 수 있습니다. 열과 데이터 배열이 React 구성 요소에 매핑됩니다.

각 레코드에는 고유한 키가 있어야 한다는 점을 기억하세요 🗝️ - 이는 React가 DOM의 변경 사항을 최적으로 관리하는 데 도움이 됩니다. 이러한 키는 예를 들어 테이블의 각 요소에 할당된 path일 수 있습니다.

실제 예:

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;

이 예제를 실행할 수 있습니다here.

이 솔루션이 유용하다고 생각되면 이 게시물에 반응하거나 의견을 남겨 의견을 남겨주세요. 💬
시간 내 줘서 고마워! 😊

우리에게 쓰기! ✉

해결해야 할 문제가 있거나 React 또는 JavaScript 주제와 관련하여 아무도 대답할 수 없는 질문이 있거나 멘토링을 찾고 있는 경우 dirask.com -> Questions에 문의하십시오.