Skip to content
Snippets Groups Projects
Commit 1c660a4d authored by Jacopo Gasparetto's avatar Jacopo Gasparetto
Browse files

Change table style

parent 44320bb8
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
frontend/src/components/Table.tsx
+ 21
− 10
View file @ 1c660a4d
import './Table.css'
// import './Table.css'
type TableParams = {
className: string
......@@ -10,10 +10,12 @@ type TableParams = {
export const Table = ({ className, columns, data, onClick }: TableParams) => {
const Header = () => {
return (
<thead className="h-16">
<thead>
<tr >
{columns.map(column =>
<th className="bg-neutral-200"
<th
className="border-b font-medium p-4 first:pl-8 last:pr-8 pt-0 pb-3
text-left text-slate-800"
key={column}>
{column}
</th>)}
......@@ -24,15 +26,21 @@ export const Table = ({ className, columns, data, onClick }: TableParams) => {
const Body = () => {
return (
<tbody>
<tbody className="bg-white">
{
data.map((row, index) => {
return <tr
className="hover:bg-slate-200 hover:cursor-pointer"
className="hover:bg-slate-200 text-slate-500
hover:text-slate-800 hover:cursor-pointer"
onClick={(el) => onClick?.(el, index)}
key={index}>
{row.map((el, index) => {
return <td className="p-2 text-center border-neutral-200" key={index}>{el}</td>
return <td
className="border-b border-slate-100
p-4 first:pl-8 last:pr-8 text-left"
key={index}>
{el}
</td>
})}
</tr>;
})
......@@ -42,9 +50,12 @@ export const Table = ({ className, columns, data, onClick }: TableParams) => {
}
return (
<table className={className}>
<Header />
<Body />
</table>
<div className="w-full bg-slate-100 shadow-lg rounded-xl">
<table className={"table-auto w-full text-sm mt-8 mb-6"}>
<Header />
<Body />
</table>
</div>
)
}
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment