[TIL] 20211203 react table/ react css / emotion.js / @emotion.react

1. react table

https://www.daleseo.com/react-table/

React Table로 테이블 UI 구현하기

 

2. react css

https://hello-bryan.tistory.com/114

[React 따라하기 #13] React 에서 css 적용하기

 

3. emotion.js

https://www.howdy-mj.me/css/emotion.js-intro/

emotion.js 소개 및 사용법 (feat. CSS-in-JS)

 

4. @emotion/react 적용하기

주석이 있어야 된다.

 

import React from "react";
import { useTable } from "react-table";
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react'

const tdStyle = css`
  background-color: pink;
`;
const divStyle = css`
  background-color: hotpink;
  font-size: 24px;
  border-radius: 4px;
  padding: 32px;
  text-align: center;
  &:hover {
    color: white;
  }
`
const Table = ({ columns, data })=> {
  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
    useTable({ columns, data });

  return (
    <table {...getTableProps()}>
      <thead css={tdStyle} >
        {headerGroups.map((headerGroup) => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map((column) => (
              <th {...column.getHeaderProps()}>{column.render("Header")}</th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map((row) => {
          prepareRow(row);
          return (
            <tr css={tdStyle}{...row.getRowProps()}>
              {row.cells.map((cell) => (
                <td 
                css={divStyle}
                {...cell.getCellProps()}>{cell.render("Cell")}</td>
              ))}
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}



export default Table;

---

 

세상에나 세상에나!

누구 입에서 나와도 칭찬만 나오는 사람들과 

함께 회사를 다니다니!?

이것은 행운이다!

칭찬하는 사람도 좋고 칭찬 받는 사람도 좋다.

속마음은 모를지라도 이런 조직은 처음 봤다!

나도 누구입에서 나와도 칭찬만 나오는 사람이 되고 싶다. 

이 회사에 오고 나서 더 높은 나를 추구하고 싶어졌다. 

그 동안은 뭔가 어떤 스킬을 쌓고 어떤 공부를 하고 이런 것에 집중했다면 

지금은 인격을 높이는 것에 관심이 생겼다. 

며칠전까지만 해도 플젝 팀원이랑 이런 대화를 할때 

인격이 대체 뭐죠? 일을 하는데 왜 인격이 높아지죠??

이랬는데 무슨 말인지 조금은 알 것 같다.  

높은 인격을 가진 사람이 되어야겠다.