Table Component Example

 

 

autoComplete와 비슷한데 Table도 MUI에서 제공하는 것을 쓸 까 하다가 왠지 할 수 있을 것 같아서 도전해보았당

 

나중에 비슷한 거 만들일이 많을 것 같은데 그 때에도 아래 코드 보면서 기억을 더듬더듬 만들어야지

import * as React from "react";
import styled from "@emotion/styled";

const TableContainer = styled.div``;
const TableHead = styled.div`
  width: 100%;
  grid-template-columns: 1fr 2fr 1fr 3fr; //테이블 컬럼 너비 정하기
  background-color: ${({ theme }) => theme.colors.grayEa};
  display: grid;
  height: 40px;
  justify-items: flex-start;
  align-content: center;

  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
`;
const TableBody = styled.div`
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr 3fr;
  justify-items: flex-start;
  align-content: center;
  height: 40px;

  font-size: 18px;
  line-height: 28px;
  font-weight: 400;

  &.emphasis {
    background-color: ${({ theme }) => theme.colors.pointEb};
    color: ${({ theme }) => theme.colors.white};
  }
  &.normal {
    background-color: ${({ theme }) => theme.colors.grayF4};
    &:nth-of-type(2n) {
      background-color: ${({ theme }) => theme.colors.white};
    }
  }
`;
const TableCell = styled.div`
  padding-left: 20px;
`;

interface Props {
  data: any[] | null;
  className?: string;
}
const Table = ({ data, className }: Props) => {
  const columns = ["순위", "아파트명", "세대수", "주소"];

  return (
    <TableContainer className={className}>
      <TableHead>
        {columns.map((name, index) => (
          <TableCell key={index}>{name}</TableCell>
        ))}
      </TableHead>

      {data &&
        data.map((row, index) => (
          <TableBody
            className={index === 0 ? "emphasis" : "normal"}
            key={index}
          >
            <TableCell>{index === 0 ? `기준` : `${index}위`}</TableCell>
            <TableCell>{row.name}</TableCell>
            <TableCell>{row.householdsCount}세대</TableCell>
            <TableCell>{row.addr}</TableCell>
          </TableBody>
        ))}
    </TableContainer>
  );
};

export default Table;

export const sampleData = [
 	{
    id: "A13816101",
    name: "송파동부센트레빌",
    addr: "서울특별시 송파구 송파대로37길 29",
    householdsCount: 206,
    useDate: "2004-12-15",
    lat: 37.500388,
    lng: 127.109055,
    },
    {
      id: "A10025850",
      name: "헬리오시티아파트",
      addr: "서울특별시 송파구 송파대로 345",
      householdsCount: 9510,
      useDate: "2018-12-28",
      lat: 37.497555,
      lng: 127.107194,
    },
    {
      id: "A13811203",
      name: "거여4단지",
      addr: "서울특별시 송파구 양산로4길 8",
      householdsCount: 546,
      useDate: "1997-07-03",
      lat: 37.489223,
      lng: 127.143858,
    },
    {
      id: "A13821007",
      name: "송파파인타운9단지",
      addr: "서울특별시 송파구 송파대로8길 17",
      householdsCount: 796,
      useDate: "2007-12-24",
      lat: 37.478197,
      lng: 127.128831,
    },
    {
      id: "A13879102",
      name: "잠실5단지아파트",
      addr: "서울특별시 송파구 송파대로 567",
      householdsCount: 3930,
      useDate: "1978-04-15",
      lat: 37.515359,
      lng: 127.094695,
    },
    {
      id: "A13880806",
      name: "가락쌍용1차",
      addr: "서울특별시 송파구 동남로 193",
      householdsCount: 2064,
      useDate: "1997-03-20",
      lat: 37.495694,
      lng: 127.128109,
    },
  ]