File name
Commit message
Commit date
2023-02-24
File name
Commit message
Commit date
2023-02-24
import React from "react";
import Button from "./Button.jsx";
// import styled from "styled-components";
export default function Table({ head, contents, contentKey, onClick, className, view, offset, limit}) {
const [modalOpen, setModalOpen] = React.useState(false);
const openModal = () => {
setModalOpen(true);
};
const [modalOpen2, setModalOpen2] = React.useState(false);
const openModal2 = () => {
setModalOpen2(true);
};
const buttonPrint = () => {
if(view == 'mySenior'){
return(
<td>
<Button
className={"btn-small gray-btn"}
btnName={"보기"}
onClick={openModal}
/>
</td>)
}
else if(view == 'allSenior'){
return(
<>
<td>
<Button
className={"btn-small gray-btn"}
btnName={"선택"}
onClick={openModal2}
/>
</td>
<td>
<Button
className={"btn-small gray-btn"}
btnName={"보기"}
onClick={openModal}
/>
</td>
</>
)
}
}
return (
<table className={className}>
<thead>
<tr>
{head.map((i) => {
return <th>{i}</th>;
})}
</tr>
</thead>
<tbody>
{contents.slice(offset, offset + limit).map((i, index) => {
return (
<tr key={index}>
{/* // <td>{i.rn}</td>
// <td>{i.user_name}</td>
// <td>{i.user_phonenumber}</td>
// <td>{i.user_gender}</td>
// <td>{i.user_birth}</td>
// <td>{i.user_address}</td>
// {buttonPrint()} */}
{contentKey.map((kes) => {
return (
<>
<td onClick={onClick}>{i[kes]}</td>
</>
)
})}
{buttonPrint()}
</tr>
);
})}
</tbody>
</table>
);
}
// const TableStyled = styled.table`
// border-top: 2px solid #2d303f;
// border-bottom: 1px solid #e4dccf;
// /* &:hover {
// background-color: #e4dccf;
// } */
// `;
// const TrStyled = styled.tr`
// cursor: pointer;
// `;
// const ThStyled = styled.th`
// padding: 1rem 0;
// font-weight: bold;
// background-color: #f0ebe3;
// font-size: 1.4rem;
// text-align: center;
// `;
// const TdStyled = styled.td`
// padding: 1rem 0;
// border-top: 1px solid #ececec;
// text-align: center;
// font-size: 1.3rem;
// background-color: #ffffff;
// `;