twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-11-26 13:42:44 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #38 from twentyhq/cbo-table-styling

Browse Source 
Improve Table Header style
This commit is contained in:
Charles Bochet 2023-04-14 13:17:35 +02:00 committed by GitHub
commit f3b916f20b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 87 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
front/src/components/table/ColumnHead.tsx Normal file
View File

@ -0,0 +1,34 @@
import styled from '@emotion/styled';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { IconProp } from '@fortawesome/fontawesome-svg-core';
type OwnProps = {
viewName: string;
viewIcon?: IconProp;
};
const StyledTitle = styled.div`
display: flex;
flex-direction: row;
align-items: center;
height: 40px;
color: ${(props) => props.theme.text60};
font-weight: 500;
padding-left: ${(props) => props.theme.spacing(2)};
`;
const StyledIcon = styled.div`
display: flex;
margin-right: ${(props) => props.theme.spacing(1)};
`;
function TableHeader({ viewName, viewIcon }: OwnProps) {
return (
<StyledTitle>
<StyledIcon>{viewIcon && <FontAwesomeIcon icon={viewIcon} />}</StyledIcon>
{viewName}
</StyledTitle>
);
}
export default TableHeader;

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

@ -32,6 +32,12 @@ const StyledTable = styled.table`
}
`;
const StyledTableWithHeader = styled.div`
display: flex;
flex-direction: column;
flex: 1;
`;
function Table({ data, columns, viewName, viewIcon }: OwnProps) {
const table = useReactTable({
data,
@ -40,7 +46,7 @@ function Table({ data, columns, viewName, viewIcon }: OwnProps) {
});
return (
<div>
<StyledTableWithHeader>
<TableHeader viewName={viewName} viewIcon={viewIcon} />
<StyledTable>
<thead>
@ -92,7 +98,7 @@ function Table({ data, columns, viewName, viewIcon }: OwnProps) {
</tfoot>
)}
</StyledTable>
</div>
</StyledTableWithHeader>
);
}

35
front/src/components/table/TableHeader.tsx
View File

@ -11,16 +11,47 @@ const StyledTitle = styled.div`
display: flex;
flex-direction: row;
align-items: center;
gap: 5px;
justify-content: space-between;
height: 40px;
color: ${(props) => props.theme.text60};
font-weight: 500;
padding-left: ${(props) => props.theme.spacing(2)};
`;
const StyledIcon = styled.div`
display: flex;
margin-right: ${(props) => props.theme.spacing(2)};
`;
const StyledViewSection = styled.div`
display: flex;
`;
const StyledFilters = styled.div`
display: flex;
font-weight: 400;
margin-right: ${(props) => props.theme.spacing(1)};
`;
const StyledFilterButton = styled.div`
display: flex;
margin-left: ${(props) => props.theme.spacing(4)};
`;
function TableHeader({ viewName, viewIcon }: OwnProps) {
return (
<StyledTitle>
{viewIcon && <FontAwesomeIcon icon={viewIcon} />}
<StyledViewSection>
<StyledIcon>
{viewIcon && <FontAwesomeIcon icon={viewIcon} size="lg" />}
</StyledIcon>
{viewName}
</StyledViewSection>
<StyledFilters>
<StyledFilterButton>Filter</StyledFilterButton>
<StyledFilterButton>Sort</StyledFilterButton>
<StyledFilterButton>Settings</StyledFilterButton>
</StyledFilters>
</StyledTitle>
);
}

24
front/src/pages/people/People.tsx
View File

@ -13,7 +13,7 @@ import { Pipe } from '../../interfaces/pipe.interface';
import { createColumnHelper } from '@tanstack/react-table';
import styled from '@emotion/styled';
import CellLink from '../../components/table/CellLink';
import TableHeader from '../../components/table/TableHeader';
import ColumnHead from '../../components/table/ColumnHead';
import personPlaceholder from './placeholder.png';
import { parsePhoneNumber, CountryCode } from 'libphonenumber-js';
@ -30,13 +30,11 @@ type Person = {
};
const StyledPeopleContainer = styled.div`
padding: 8px;
display: flex;
padding-left: ${(props) => props.theme.spacing(2)};
padding-right: ${(props) => props.theme.spacing(2)};
width: 100%;
table {
margin-top: 8px;
}
a {
color: inherit;
text-decoration: none;
@ -105,7 +103,7 @@ const columnHelper = createColumnHelper<Person>();
const columns = [
columnHelper.accessor('fullName', {
header: () => <TableHeader viewName="People" viewIcon={faUser} />,
header: () => <ColumnHead viewName="People" viewIcon={faUser} />,
cell: (props) => (
<CellLink
name={props.row.original.fullName}
@ -115,7 +113,7 @@ const columns = [
),
}),
columnHelper.accessor('email', {
header: () => <TableHeader viewName="Email" viewIcon={faEnvelope} />,
header: () => <ColumnHead viewName="Email" viewIcon={faEnvelope} />,
cell: (props) => (
<a href={`mailto:${props.row.original.email}`}>
{props.row.original.email}
@ -123,7 +121,7 @@ const columns = [
),
}),
columnHelper.accessor('company', {
header: () => <TableHeader viewName="Company" viewIcon={faBuildings} />,
header: () => <ColumnHead viewName="Company" viewIcon={faBuildings} />,
cell: (props) => (
<CellLink
name={props.row.original.company.name}
@ -133,7 +131,7 @@ const columns = [
),
}),
columnHelper.accessor('phone', {
header: () => <TableHeader viewName="Phone" viewIcon={faPhone} />,
header: () => <ColumnHead viewName="Phone" viewIcon={faPhone} />,
cell: (props) => (
<a
href={parsePhoneNumber(
@ -149,7 +147,7 @@ const columns = [
),
}),
columnHelper.accessor('creationDate', {
header: () => <TableHeader viewName="Creation" viewIcon={faCalendar} />,
header: () => <ColumnHead viewName="Creation" viewIcon={faCalendar} />,
cell: (props) =>
new Intl.DateTimeFormat(undefined, {
month: 'short',
@ -158,7 +156,7 @@ const columns = [
}).format(props.row.original.creationDate),
}),
columnHelper.accessor('pipe', {
header: () => <TableHeader viewName="Pipe" viewIcon={faRectangleList} />,
header: () => <ColumnHead viewName="Pipe" viewIcon={faRectangleList} />,
cell: (props) => (
<CellLink
name={props.row.original.pipe.name}
@ -168,7 +166,7 @@ const columns = [
),
}),
columnHelper.accessor('city', {
header: () => <TableHeader viewName="City" viewIcon={faMapPin} />,
header: () => <ColumnHead viewName="City" viewIcon={faMapPin} />,
}),
];