diff --git a/front/src/components/table/Table.tsx b/front/src/components/table/Table.tsx index 325b399cc..28b1d6462 100644 --- a/front/src/components/table/Table.tsx +++ b/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; columns: Array>; 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 (
- + {table.getHeaderGroups().map((headerGroup) => ( diff --git a/front/src/components/table/TableHeader.tsx b/front/src/components/table/TableHeader.tsx index 170ba573a..4a3ec93fd 100644 --- a/front/src/components/table/TableHeader.tsx +++ b/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 {viewName}; +function TableHeader({ viewName, viewIcon }: OwnProps) { + return ( + + {viewIcon && } + {viewName} + + ); } export default TableHeader;