Add icon property to table.

front/src/components/table/Table.tsx

@@ -7,14 +7,16 @@ import {
   useReactTable,
 } from '@tanstack/react-table';
 import TableHeader from './TableHeader';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
 
 type OwnProps = {
   data: Array<any>;
   columns: Array<ColumnDef<any, any>>;
   viewName: string;
+  viewIcon?: IconProp;
 };
 
-function Table({ data, columns, viewName }: OwnProps) {
+function Table({ data, columns, viewName, viewIcon }: OwnProps) {
   const table = useReactTable({
     data,
     columns,
@@ -23,7 +25,7 @@ function Table({ data, columns, viewName }: OwnProps) {
 
   return (
     <div>
-      <TableHeader viewName={viewName} />
+      <TableHeader viewName={viewName} viewIcon={viewIcon} />
       <table>
         <thead>
           {table.getHeaderGroups().map((headerGroup) => (

front/src/components/table/TableHeader.tsx

@@ -1,15 +1,27 @@
 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;
+  gap: 5px;
+  color: ${(props) => props.theme.text60};
 `;
 
-function TableHeader({ viewName }: OwnProps) {
-  return <StyledTitle>{viewName}</StyledTitle>;
+function TableHeader({ viewName, viewIcon }: OwnProps) {
+  return (
+    <StyledTitle>
+      {viewIcon && <FontAwesomeIcon icon={viewIcon} />}
+      {viewName}
+    </StyledTitle>
+  );
 }
 
 export default TableHeader;