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;