Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

PR Link for E2492 Fall 2024 #81

Open
wants to merge 23 commits into
base: main
Choose a base branch
from
Open
Changes from 1 commit
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
9639f6b
applied alternating light-grey color of the statistics table
leyusufo Nov 27, 2024
69dfbdc
Added borders to the statistics table located
leyusufo Nov 30, 2024
554e68f
Added team member list before the heatmap
leyusufo Nov 30, 2024
6a29975
Deleted team member list from the bottom of the heatmap
leyusufo Nov 30, 2024
a6461b2
getting & displaying team member list changed to ReviewTable.tsx
leyusufo Dec 1, 2024
6e030b8
added toggle option for to display word count of reviews
simong2 Dec 1, 2024
e7de448
rename variable to be more consistent
simong2 Dec 1, 2024
f94e105
removed some declared but its value never read imports
simong2 Dec 1, 2024
62c33e9
toggle with option to open/close
simong2 Dec 2, 2024
c191098
Implemented export functionality and feedback indicators in Table com…
akkireddyanusha Dec 2, 2024
44be4ea
small fix
simong2 Dec 2, 2024
49ab9d1
env fixes
simong2 Dec 2, 2024
0a2e3b6
Added export functionality and last updated indicator to Table component
akkireddyanusha Dec 2, 2024
94083cf
better collapse experience for toggle
simong2 Dec 2, 2024
5483930
deleted App.test.tsx because it failed to run
leyusufo Dec 3, 2024
be99faf
added testing for statistics.tsx file
leyusufo Dec 3, 2024
7ba1984
added test for ReviewTable.tsx file
leyusufo Dec 3, 2024
e6d1309
updated ReviewTable.test.tsx file
leyusufo Dec 3, 2024
3188f80
new custom feature for character count
simong2 Dec 4, 2024
268a285
new toggle name and size
simong2 Dec 4, 2024
fb6ea48
Merge branch 'main' into toggle1
simong2 Dec 4, 2024
25c551a
Merge pull request #1 from simong2/toggle1
simong2 Dec 4, 2024
2a7b0ab
add test for toggle panel
simong2 Dec 4, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Added export functionality and last updated indicator to Table component
akkireddyanusha committed Dec 2, 2024
commit 0a2e3b64398cfc38d5ede32551334d4ff66d73e4
101 changes: 37 additions & 64 deletions src/components/Table/Table.tsx
Original file line number Diff line number Diff line change
@@ -80,8 +80,8 @@ const Table: React.FC<TableProps> = ({
const [globalFilter, setGlobalFilter] = useState<string | number>("");
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
const [columnVisibilityState, setColumnVisibilityState] = useState(columnVisibility);
const [isGlobalFilterVisible, setIsGlobalFilterVisible] = useState(showGlobalFilter); // State for global filter visibility
const [lastUpdated, setLastUpdated] = useState<Date | null>(null); // Track last updated timestamp
const [isGlobalFilterVisible, setIsGlobalFilterVisible] = useState(showGlobalFilter);
const [lastUpdated, setLastUpdated] = useState<Date | null>(null);

const selectable = typeof onSelectionChange === "function";
const onSelectionChangeRef = useRef<any>(onSelectionChange);
@@ -120,24 +120,13 @@ const Table: React.FC<TableProps> = ({
getPageCount,
} = table;

// Used to return early from useEffect() on mount.
const firstRenderRef = useRef(true);

useEffect(() => {
if (firstRenderRef.current) {
firstRenderRef.current = false;
return;
}

if (typeof onSelectionChangeRef.current !== "function") {
return;
if (typeof onSelectionChangeRef.current === "function") {
const selectedData = table.getSelectedRowModel().flatRows.map((flatRow) => flatRow.original);
onSelectionChangeRef.current(selectedData);
}
const selectedData = table.getSelectedRowModel().flatRows.map((flatRow) => flatRow.original);
const handleSelectionChange = onSelectionChangeRef.current;
handleSelectionChange?.(selectedData);
}, [table.getSelectedRowModel().flatRows]);

// Set initial "Last Updated" timestamp
useEffect(() => {
setLastUpdated(new Date());
}, [initialData]);
@@ -146,12 +135,11 @@ const Table: React.FC<TableProps> = ({
setIsGlobalFilterVisible(!isGlobalFilterVisible);
};

// Export Table Data
const exportTableData = (format: "csv" | "xlsx") => {
const tableData = initialData.map((row) => {
const rowData: Record<string, any> = {};
columns.forEach((col) => {
const accessor = col.id; // Adjust based on column structure
const accessor = col.id; // Use column `id` for keys
if (accessor) {
rowData[accessor] = row[accessor];
}
@@ -167,7 +155,6 @@ const Table: React.FC<TableProps> = ({
XLSX.writeFile(workbook, `table_data.${fileType}`);
};

// Refresh Data Function
const refreshTableData = () => {
setLastUpdated(new Date());
};
@@ -184,7 +171,7 @@ const Table: React.FC<TableProps> = ({
<span style={{ marginLeft: "5px" }} onClick={toggleGlobalFilter}>
<FaSearch style={{ cursor: "pointer" }} />
{isGlobalFilterVisible ? " Hide" : " Show"}
</span>{" "}
</span>
</Row>
</Container>
<Container>
@@ -194,50 +181,40 @@ const Table: React.FC<TableProps> = ({
<thead className="table-secondary">
{getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => {
return (
<th key={header.id} colSpan={header.colSpan}>
{header.isPlaceholder ? null : (
<>
<div
{...{
className: header.column.getCanSort()
? "cursor-pointer select-none"
: "",
onClick: header.column.getToggleSortingHandler(),
}}
>
{flexRender(header.column.columnDef.header, header.getContext())}
{{
asc: " 🔼",
desc: " 🔽",
}[header.column.getIsSorted() as string] ?? null}
</div>
{showColumnFilter && header.column.getCanFilter() ? (
<ColumnFilter column={header.column} />
) : null}
</>
)}
</th>
);
})}
{headerGroup.headers.map((header) => (
<th key={header.id} colSpan={header.colSpan}>
{header.isPlaceholder ? null : (
<div
{...{
className: header.column.getCanSort()
? "cursor-pointer select-none"
: "",
onClick: header.column.getToggleSortingHandler(),
}}
>
{flexRender(header.column.columnDef.header, header.getContext())}
{header.column.getIsSorted()
? header.column.getIsSorted() === "asc"
? " 🔼"
: " 🔽"
: null}
</div>
)}
</th>
))}
</tr>
))}
</thead>
<tbody>
{getRowModel().rows.map((row) => {
return (
<tr key={row.id}>
{row.getVisibleCells().map((cell) => {
return (
<td key={cell.id}>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</td>
);
})}
</tr>
);
})}
{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>
</BTable>
{showPagination && (
@@ -252,8 +229,6 @@ const Table: React.FC<TableProps> = ({
getState={getState}
/>
)}

{/* Export Buttons */}
<div style={{ marginTop: "10px" }}>
<button onClick={() => exportTableData("csv")} className="btn btn-primary me-2">
Export to CSV
@@ -262,8 +237,6 @@ const Table: React.FC<TableProps> = ({
Export to Excel
</button>
</div>

{/* Feedback Indicators */}
<div style={{ marginTop: "10px" }}>
<span>
Last Updated: {lastUpdated ? lastUpdated.toLocaleString() : "Never"}