import './styles.scss'
import { ReactComponent as AgreeCheck } from 'assets/icons/AgreeCheck.svg';

import React from 'react';
import { useTable } from 'react-table';



const Table = ({ columns, data, isScrolled = false }) => {
    const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable({ columns, data });

    return (

        <div className={`table-container ${isScrolled ? "table-container--scrolled" : ""}`}>
            <table {...getTableProps()} className='table'>
                <thead className='table-head'>
                    {headerGroups.map(headerGroup => (
                        <tr {...headerGroup.getHeaderGroupProps()}>
                            {headerGroup.headers.map(column => (
                                <th {...column.getHeaderProps()} className='button-text'>
                                    {column.render('Header')}
                                </th>
                            ))}
                        </tr>
                    ))}
                </thead>
                <tbody {...getTableBodyProps()}>
                    {rows.map((row, rowIndex) => {
                        prepareRow(row);
                        return (
                            <tr
                                {...row.getRowProps()}
                                style={{ borderBottom: '1px solid #ddd' }}
                            >
                                {row.cells.map((cell, cellIndex) => (
                                    <td
                                        {...cell.getCellProps()}
                                        className={`${cellIndex === 0 ? 'first-column' : ''}`}
                                    >
                                        {typeof cell.value === 'boolean' ? (
                                            cell.value ? <AgreeCheck /> : '-'
                                        ) : (
                                            <span className='link'>{cell.render('Cell')}</span>
                                        )}
                                    </td>
                                ))}
                            </tr>
                        );
                    })}
                </tbody>
            </table>
        </div>
    );
};

export default Table;

• [F] index.jsx
  Delete
• [F] styles.scss
  Delete