admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Add table styling

Browse Source
This commit is contained in:
Anders Borch
2023-04-12 19:24:35 +02:00
parent b7e43de670
commit 7111f99cff
1 changed files with 18 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
front/src/components/table/Table.tsx
View File

@ -8,6 +8,7 @@ import {
} from '@tanstack/react-table'; } from '@tanstack/react-table';
import TableHeader from './TableHeader'; import TableHeader from './TableHeader';
import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { IconProp } from '@fortawesome/fontawesome-svg-core';
import styled from '@emotion/styled';
type OwnProps = { type OwnProps = {
data: Array<any>; data: Array<any>;
@ -16,6 +17,21 @@ type OwnProps = {
viewIcon?: IconProp; viewIcon?: IconProp;
}; };
const StyledTable = styled.table`
min-width: 100%;
border-radius: 4px;
border: 1px solid #f5f5f5;
border-spacing: 0;
td,
th {
border: 1px solid #f5f5f5;
font-size: 12px;
text-align: left;
padding: 11px 0 11px 4px;
}
`;
function Table({ data, columns, viewName, viewIcon }: OwnProps) { function Table({ data, columns, viewName, viewIcon }: OwnProps) {
const table = useReactTable({ const table = useReactTable({
data, data,
@ -26,7 +42,7 @@ function Table({ data, columns, viewName, viewIcon }: OwnProps) {
return ( return (
<div> <div>
<TableHeader viewName={viewName} viewIcon={viewIcon} /> <TableHeader viewName={viewName} viewIcon={viewIcon} />
<table> <StyledTable>
<thead> <thead>
{table.getHeaderGroups().map((headerGroup) => ( {table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}> <tr key={headerGroup.id}>
@ -71,6 +87,7 @@ function Table({ data, columns, viewName, viewIcon }: OwnProps) {
))} ))}
</tfoot> </tfoot>
</table> </table>
</StyledTable>
</div> </div>
); );
} }