1. DataTableBasic

DataTableBasic 컴포넌트는 데이터를 테이블 형식으로 보여주기 위한 기본 데이터 테이블 컴포넌트입니다. 이 컴포넌트는 다양한 테마 색상으로 테이블의 헤더와 셀을 커스터마이징할 수 있습니다. Tailwind CSS를 활용한 다크 모드도 지원합니다.

1.1. Import

import DataTableBasic from './DataTableBasic';

1.2. Usage

기본 사용 예제는 아래와 같습니다:

Name	Age	City
John Doe	25	New York
Jane Doe	28	Los Angeles

import DataTableBasic from './DataTableBasic';

function Example() {
  const data = [
    { Name: "John Doe", Age: 25, City: "New York" },
    { Name: "Jane Doe", Age: 28, City: "Los Angeles" },
  ];

  return <DataTableBasic data={data} />;
}

export default Example;

1.3. Props

DataTableBasic 컴포넌트는 다음과 같은 Props를 받습니다:

Prop	Description	Type	Default
`data`	테이블에 표시할 데이터 배열	`Array<{ [key: string]: string \| number } >`	`[]`
`thColor`	테이블 헤더 색상을 설정합니다.	`"Blue" \| "Gray" \| "Purple" \| "Green" \| "Yellow" \| "Red" \| "Dark" \| "Navy"`	`"Blue"`
`tdColor`	테이블 셀 색상을 설정합니다.	`"Basic" \| "Primary" \| "Gray" \| "Secondary" \| "Success" \| "Warning" \| "Danger"`	`"Primary"`

1.4. Full Example

import React from "react";

interface DataTableBasicProp {
  data: Array<{ [key: string]: string | number }>;
  thColor?:
    | "Blue"
    | "Gray"
    | "Purple"
    | "Green"
    | "Yellow"
    | "Red"
    | "Dark"
    | "Navy";
  tdColor?:
    | "Basic"
    | "Primary"
    | "Gray"
    | "Secondary"
    | "Success"
    | "Warning"
    | "Danger";
}

const DataTableBasic = ({
  data,
  thColor = "Blue",
  tdColor = "Primary",
}: DataTableBasicProp) => {
  const col = data.length > 0 ? Object.keys(data[0]) : [];

  const colorClassMap: { [key: string]: string } = {
    Blue: "bg-Blue dark:bg-blue-900",
    Gray: "bg-Gray dark:bg-gray-700",
    Purple: "bg-Purple dark:bg-purple-800",
    Green: "bg-Green dark:bg-green-800",
    Yellow: "bg-Yellow dark:bg-yellow-700",
    Red: "bg-Red dark:bg-red-800",
    Dark: "bg-Dark dark:bg-gray-900",
    Navy: "bg-Navy dark:bg-blue-800",
    Basic: "bg-Basic dark:bg-gray-800",
    Primary: "bg-Primary dark:bg-blue-700",
    Secondary: "bg-Secondary dark:bg-indigo-800",
    Success: "bg-Success dark:bg-green-700",
    Warning: "bg-Warning dark:bg-yellow-800",
    Danger: "bg-Danger dark:bg-red-700",
  };

  return (
    <div className="overflow-x-auto dark:text-white">
      <table className="min-w-full border-collapse dark:border-[#3D4250] dark:bg-[#2A2E39]">
        <thead>
          <tr>
            {col.map((header) => (
              <th
                className={`border-2 px-4 py-2 text-center font-bold dark:text-white ${
                  colorClassMap[thColor] || "bg-Blue"
                }`}
                key={header}
              >
                {header}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {data.map((row, index) => (
            <tr key={index}>
              {col.map((content) => (
                <td
                  className={`border-2 px-4 py-2 text-center dark:text-white ${
                    colorClassMap[tdColor] || "bg-Basic"
                  }`}
                  key={content}
                >
                  {row[content]}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default DataTableBasic;