Setting up first table in frontend

front/src/components/table/Table.tsx

@@ -0,0 +1,76 @@
+import * as React from 'react';
+
+import {
+  ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+import TableHeader from './TableHeader';
+
+type OwnProps = {
+  data: Array<any>;
+  columns: Array<ColumnDef<any, any>>;
+  viewName: string;
+};
+
+function Table({ data, columns, viewName }: OwnProps) {
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  return (
+    <div>
+      <TableHeader viewName={viewName} />
+      <table>
+        <thead>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <tr key={headerGroup.id}>
+              {headerGroup.headers.map((header) => (
+                <th key={header.id}>
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext(),
+                      )}
+                </th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody>
+          {table.getRowModel().rows.map((row) => (
+            <tr key={row.id}>
+              {row.getVisibleCells().map((cell) => (
+                <td key={cell.id}>
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+        <tfoot>
+          {table.getFooterGroups().map((footerGroup) => (
+            <tr key={footerGroup.id}>
+              {footerGroup.headers.map((header) => (
+                <th key={header.id}>
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                        header.column.columnDef.footer,
+                        header.getContext(),
+                      )}
+                </th>
+              ))}
+            </tr>
+          ))}
+        </tfoot>
+      </table>
+    </div>
+  );
+}
+
+export default Table;

front/src/components/table/TableHeader.tsx

@@ -0,0 +1,15 @@
+import styled from '@emotion/styled';
+
+type OwnProps = {
+  viewName: string;
+};
+
+const StyledTitle = styled.div`
+  display: flex;
+`;
+
+function TableHeader({ viewName }: OwnProps) {
+  return <StyledTitle>{viewName}</StyledTitle>;
+}
+
+export default TableHeader;

front/src/interfaces/company.interface.ts

@@ -0,0 +1,5 @@
+export interface Company {
+  id: number;
+  name: string;
+  logo: string;
+}

front/src/interfaces/pipe.interface.ts

@@ -0,0 +1,5 @@
+export interface Pipe {
+  id: number;
+  name: string;
+  icon: string;
+}

front/src/pages/people/People.tsx

@@ -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>
   );
 }