import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import "./style.scss";
import { useTable } from "react-table";
const Table = ({ columns, data }) => {
    const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable({ columns, data });
    return (_jsxs("table", { ...getTableProps(), className: "table", children: [_jsx("thead", { children: headerGroups.map((headerGroup) => (_jsxs(React.Fragment, { children: [headerGroup.headers.map((column) => (_jsx("th", { ...column.getHeaderProps(), style: { width: column.width }, children: column.render("Header") }))), headerGroup.headers.length < columns.length && _jsx("th", {})] }, headerGroup.getHeaderGroupProps().key))) }), _jsx("tbody", { ...getTableBodyProps(), children: rows.map((row) => {
                    prepareRow(row);
                    return (_jsxs("tr", { ...row.getRowProps(), className: "row", children: [row.cells.map((cell) => (_jsx("td", { ...cell.getCellProps(), children: cell.render("Cell") }))), row.cells.length < columns.length && _jsx("td", {})] }));
                }) })] }));
};
export default Table;
