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

Setting up first table in frontend

Browse Source
This commit is contained in:
Charles Bochet
2023-04-12 11:39:46 +02:00
parent b629d48cc5
commit cb3a209380
6 changed files with 192 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,10 +1,100 @@
import { faUser } from '@fortawesome/free-regular-svg-icons';
import WithTopBarContainer from '../../layout/containers/WithTopBarContainer';
import Table from '../../components/table/Table';
import { Company } from '../../interfaces/company.interface';
import { Pipe } from '../../interfaces/pipe.interface';
import { createColumnHelper } from '@tanstack/react-table';
type People = {
fullName: string;
email: string;
company: Company;
phone: string;
creationDate: string;
pipe: Pipe;
city: string;
};
const defaultData: Array<People> = [
{
fullName: 'Alexandre Prot',
email: 'alexandre@qonto.com',
company: { id: 1, name: 'Qonto', logo: 'https://qonto.eu/logo.png' },
phone: '06 12 34 56 78',
creationDate: 'Feb 23, 2018',
pipe: { id: 1, name: 'Sales Pipeline', icon: 'faUser' },
city: 'Paris',
},
{
fullName: 'Alexandre Prot',
email: 'alexandre@qonto.com',
company: { id: 1, name: 'Qonto', logo: 'https://qonto.eu/logo.png' },
phone: '06 12 34 56 78',
creationDate: 'Feb 23, 2018',
pipe: { id: 1, name: 'Sales Pipeline', icon: 'faUser' },
city: 'Paris',
},
{
fullName: 'Alexandre Prot',
email: 'alexandre@qonto.com',
company: { id: 1, name: 'Qonto', logo: 'https://qonto.eu/logo.png' },
phone: '06 12 34 56 78',
creationDate: 'Feb 23, 2018',
pipe: { id: 1, name: 'Sales Pipeline', icon: 'faUser' },
city: 'Paris',
},
{
fullName: 'Alexandre Prot',
email: 'alexandre@qonto.com',
company: { id: 1, name: 'Qonto', logo: 'https://qonto.eu/logo.png' },
phone: '06 12 34 56 78',
creationDate: 'Feb 23, 2018',
pipe: { id: 1, name: 'Sales Pipeline', icon: 'faUser' },
city: 'Paris',
},
{
fullName: 'Alexandre Prot',
email: 'alexandre@qonto.com',
company: { id: 1, name: 'Qonto', logo: 'https://qonto.eu/logo.png' },
phone: '06 12 34 56 78',
creationDate: 'Feb 23, 2018',
pipe: { id: 1, name: 'Sales Pipeline', icon: 'faUser' },
city: 'Paris',
},
];
const columnHelper = createColumnHelper<People>();
const columns = [
columnHelper.accessor('fullName', {
header: () => 'People',
}),
columnHelper.accessor('email', {
header: () => <span>Email</span>,
}),
columnHelper.accessor('company', {
header: () => <span>Company</span>,
cell: (props) => <span>{props.row.original.company.name}</span>,
}),
columnHelper.accessor('phone', {
header: () => <span>Phone</span>,
}),
columnHelper.accessor('creationDate', {
header: () => <span>Creation</span>,
}),
columnHelper.accessor('pipe', {
header: () => <span>Pipe</span>,
cell: (props) => <span>{props.row.original.pipe.name}</span>,
}),
columnHelper.accessor('city', {
header: () => <span>City</span>,
}),
];
function People() {
return (
<WithTopBarContainer title="People" icon={faUser}>
<></>
<Table data={defaultData} columns={columns} viewName="All People" />
</WithTopBarContainer>
);
}