fix(TanStackTable): fix column alignment inconsistency

- reverted #7901 and #7923
- dropped support for TanStack columnVisibility

Author: adi-herwana-nus

.circleci/config.yml

@@ -302,7 +302,10 @@ jobs:
       - run:
           name: Install Playwright dependencies
           working_directory: tests
-          command: yarn install; yarn prepare
+          command: |
+            wget -q -O - https://dl.google.com/linux/linux_signing_key.pub | sudo tee /etc/apt/trusted.gpg.d/google.asc >/dev/null
+            yarn install
+            yarn prepare
 
       - run:
           name: Run Playwright tests

client/app/bundles/course/assessment/pages/AssessmentStatistics/LiveFeedbackStatisticsTable.tsx

@@ -316,7 +316,7 @@ const LiveFeedbackStatisticsTable: FC<Props> = (props) => {
             getValue: (datum) => datum.courseUser.email,
           },
           title: t(translations.email),
-          hidden: true,
+          className: 'hidden',
           cell: (datum) => (
             <div className="flex grow items-center">
               {datum.courseUser.email}

client/app/bundles/course/assessment/pages/AssessmentStatistics/StudentAttemptCountTable.tsx

@@ -234,7 +234,7 @@ const StudentAttemptCountTable: FC<Props> = ({ includePhantom }) => {
     },
     {
       title: t(translations.email),
-      hidden: true,
+      className: 'hidden',
       csvDownloadable: true,
       searchProps: { getValue: (datum) => datum.courseUser.email },
       cell: (datum) => (

client/app/bundles/course/assessment/pages/AssessmentStatistics/StudentGradesPerQuestionTable.tsx

@@ -188,7 +188,7 @@ const StudentGradesPerQuestionTable: FC<Props> = ({ includePhantom }) => {
         getValue: (datum) => datum.courseUser.email,
       },
       title: t(translations.email),
-      hidden: true,
+      className: 'hidden',
       cell: (datum) => (
         <div className="flex grow items-center">{datum.courseUser.email}</div>
       ),

client/app/bundles/course/statistics/pages/StatisticsIndex/students/StudentStatisticsTable.tsx

@@ -113,7 +113,7 @@ const StudentsStatisticsTable: FC<Props> = (props) => {
     {
       of: 'email',
       title: t(translations.email),
-      hidden: true,
+      className: 'hidden',
       cell: (student) => student.email,
       csvDownloadable: true,
     },

client/app/lib/components/table/TanStackTableBuilder/csvGenerator.ts

@@ -5,7 +5,6 @@ import { unparse } from 'papaparse';
 import { ColumnTemplate, Data } from '../builder';
 
 interface CsvGenerator<D extends Data> {
-  initialColumnsLength: number;
   headers: string[];
   rows: () => Row<D>[];
   getRealColumn: (index: number) => ColumnTemplate<D> | undefined;
@@ -20,7 +19,6 @@ const generateCsv = <D extends Data>(
     options.rows().forEach((row) => {
       const rowData = row
         .getAllCells()
-        .slice(options.initialColumnsLength)
         .reduce<string[]>((cells, cell, index) => {
           const realColumn = options.getRealColumn(index);
           const csvDownloadable = realColumn?.csvDownloadable;

client/app/lib/components/table/TanStackTableBuilder/useTanStackTableBuilder.tsx

@@ -30,7 +30,7 @@ type TanStackTableProps<D> = TableProps<
 const useTanStackTableBuilder = <D extends object>(
   props: TableTemplate<D>,
 ): TanStackTableProps<D> => {
-  const [columns, getRealColumn, initialColumnsLength] = buildTanStackColumns(
+  const [columns, getRealColumn] = buildTanStackColumns(
     props.columns,
     props.indexing?.rowSelectable,
     props.indexing?.indices,
@@ -83,12 +83,6 @@ const useTanStackTableBuilder = <D extends object>(
       columnFilters,
       globalFilter: searchKeyword.trim(),
       pagination,
-      columnVisibility: Object.fromEntries(
-        props.columns.map((column) => [
-          column.of ?? column.title,
-          !column.hidden,
-        ]),
-      ),
     },
     initialState: {
       sorting: props.sort?.initially && [
@@ -101,17 +95,18 @@ const useTanStackTableBuilder = <D extends object>(
   });
 
   const generateAndDownloadCsv = async (): Promise<void> => {
-    const headers = table.options.columns
-      .slice(initialColumnsLength)
-      .reduce<string[]>((acc, column, index) => {
+    const headers = table.options.columns.reduce<string[]>(
+      (acc, column, index) => {
         const header = column.header || column.id;
         if (header && (getRealColumn(index)?.csvDownloadable ?? false)) {
           acc.push(header as string);
         }
         return acc;
-      }, []);
+      },
+      [],
+    );
+
     const csvData = await generateCsv({
-      initialColumnsLength,
       headers,
       rows: () => table.getCoreRowModel().rows,
       getRealColumn,

client/app/lib/components/table/builder/ColumnTemplate.ts

@@ -28,7 +28,6 @@ interface ColumnTemplate<D extends Data> {
   sortable?: boolean;
   filterable?: boolean;
   searchable?: boolean;
-  hidden?: boolean;
   csvDownloadable?: boolean;
   filterProps?: FilteringProps<D>;
   csvValue?: (value) => string;

client/app/lib/components/table/builder/buildColumns.ts

@@ -4,33 +4,24 @@ type TemplateAccessor<D extends Data> = (
   builtColumnIndex: number,
 ) => ColumnTemplate<D> | undefined;
 
-export type BuiltColumns<D extends Data, C> = [
-  C[],
-  TemplateAccessor<D>,
-  number,
-];
+export type BuiltColumns<D extends Data, C> = [C[], TemplateAccessor<D>];
 
 export const buildColumns = <D extends Data, C>(
   columns: ColumnTemplate<D>[],
   getColumn: (column: ColumnTemplate<D>) => C,
   initial: C[] = [],
 ): BuiltColumns<D, C> => {
-  const initialColumnsLength = initial.length;
   const defToColumns: Record<number, ColumnTemplate<D>> = {};
 
   const defColumns = columns.reduce<C[]>((columnDefs, column) => {
     if (column.unless) return columnDefs;
 
     columnDefs.push(getColumn(column));
 
-    defToColumns[columnDefs.length - 1 - initialColumnsLength] = column;
+    defToColumns[columnDefs.length - 1] = column;
 
     return columnDefs;
   }, initial);
 
-  return [
-    defColumns,
-    (index): ColumnTemplate<D> => defToColumns[index],
-    initialColumnsLength,
-  ];
+  return [defColumns, (index): ColumnTemplate<D> => defToColumns[index]];
 };