Issue with DataGridHeaderSort

[margitkuhlberg]

Hey Team! I am trying to add sorting to some of the table header column heads and I have added necessary code, but what does not appear are the sorting arrows.

Any idea what could be wrong in the code?

Or is the issue that Data Grid functionality is not fully deployed?
https://paste.twilio.design/components/data-grid#data-grid-with-sortable-columns

[nkrantz]

Hi @margitkuhlberg - could you share a link to your reproduction so that I can check it out? Thanks!

[margitkuhlberg]

Hi @nkrantz! I have been developing in local and can't push my changes yet as it's part of a bigger repo. But the repo that I am building on top is this: https://github.com/twilio-internal/console/pull/3140
I have made changes to PerformanceDataGrid/index.tsx. Below is the whole file. Page renders in local browser, but the header is not showing sorting arrows nor the functionality is working.

import * as React from "react";
import { Box } from "@twilio-paste/core/box";
import { SkeletonLoader } from "@twilio-paste/core/skeleton-loader";

import {
  DataGrid,
  DataGridBody,
  DataGridCell,
  DataGridHead,
  DataGridHeader,
  DataGridHeaderSort,
  DataGridRow,
} from "@twilio-paste/core/data-grid";

import type { SortDirection } from "@twilio-paste/core/data-grid";

import { DAILY_SNAPSHOT_HEADER } from "../constants";
import { useGetSnapshot } from "applications/SupplierPortal/hooks/useGetSnapshot";
import { snapshotType } from "../types";

// DataGrid Cell Formatters
import { Rank } from "./Rank";
import { QualityDelta } from "./QualityDelta";
import { SystemId } from "./SystemId";
import { RateDelta } from "./RateDelta";
import { LiveStatus } from "./LiveStatus";
import { Paginator } from "./Paginator";
// import { DataGridPagination } from "./PaginationRetry";
// import DataGridPagination from "shared/components/DataGridPagination";
import AdaptivePagination from "shared/components/AdaptivePagination";

const TOTAL_PAGES = 15;

export const PerforamnceDataGrid: React.FC = () => {
  const { data: snapshotData, isLoading, isSuccess } = useGetSnapshot();

  const [currentPage, setCurrentPage] = React.useState(1);

  const handlePagination = React.useCallback((newPage) => {
    setCurrentPage(newPage);
  }, []);

  type TableBodyDataType = (string | JSX.Element)[][];

  const tableData = isSuccess && !isLoading ? snapshotData : [];
  const TableBodyData: TableBodyDataType = tableData.map(
    ({
      systemId,
      country,
      mcc,
      mnc,
      rate,
      rateDelta,
      qualityDelta,
      rank,
      liveStatus,
    }: snapshotType) => {
      return [
        <SystemId systemId={systemId} />,
        country,
        mcc,
        mnc,
        rate,
        <RateDelta rateDelta={rateDelta} />,
        <QualityDelta qualityDelta={qualityDelta} />,
        <Rank rank={rank} />,
        <LiveStatus liveStatus={liveStatus} />,
      ];
    }
  );

  const RenderCell = ({
    col,
    colIndex,
    rowIndex,
  }: {
    col: string | number | JSX.Element;
    colIndex: number;
    rowIndex: number;
  }): JSX.Element => {
    const widths = [67, 53, 79, 59, 73, 61, 89, 97, 71, 83];
    const widthsLength = widths.length;

    if (isLoading) {
      return (
        <SkeletonLoader
          width={`${widths[(rowIndex + colIndex) % widthsLength]}%`}
        />
      );
    } else {
      return <>{col}</>;
    }
  };

  const simpleComparator = (
      a: (string | JSX.Element)[],
      b: (string | JSX.Element)[],
      ascending: boolean,
      columnId: number
  ): number => {
    if (a[columnId] === b[columnId]) {
      return 0;
    }
    if (a[columnId] > b[columnId]) {
      return ascending ? 1 : -1;
    }
    return ascending ? -1 : 1;
  };

  const numColumns = DAILY_SNAPSHOT_HEADER.length;

  const initialHeaderData = [...new Array(numColumns)].map((_, index) =>
      index === 0 ? "ascending" : "none"
  );

  const initialBodyData = TableBodyData.sort((a, b) =>
      simpleComparator(a, b, true, 0)
  );

  const [sortedColumns, setSortedColumns] = React.useState<
      Array<SortDirection>
      >(initialHeaderData);
  const [sortedData, setSortedData] = React.useState(initialBodyData);

  const handleSortingColumn = (columnId: number): void => {
    // Update the state of the sort direction in column headers
    const newSortedColumns: Array<SortDirection> = sortedColumns.map(
        () => "none"
    );
    if (sortedColumns[columnId] === "ascending") {
      newSortedColumns[columnId] = "descending";
    } else {
      newSortedColumns[columnId] = "ascending";
    }
    setSortedColumns(newSortedColumns);

    // Update the table data to be sorted correctly
    setSortedData(
        TableBodyData.sort((a, b) =>
            simpleComparator(
                a,
                b,
                newSortedColumns[columnId] === "ascending",
                columnId
            )
        )
    );
  };

  return (
    <>
      <Box marginTop="space40">
        <DataGrid aria-label="User information table">
          <DataGridHead>
            <DataGridRow>
              <DataGridHeader>{DAILY_SNAPSHOT_HEADER[0]}</DataGridHeader>
              <DataGridHeader>{DAILY_SNAPSHOT_HEADER[1]}</DataGridHeader>
              <DataGridHeader>{DAILY_SNAPSHOT_HEADER[2]}</DataGridHeader>
              <DataGridHeader>{DAILY_SNAPSHOT_HEADER[3]}</DataGridHeader>
              <DataGridHeader>{DAILY_SNAPSHOT_HEADER[4]}</DataGridHeader>
              <DataGridHeader aria-sort={sortedColumns[5]}>
                <Box display="flex" alignItems="center" columnGap="space20">
                  {DAILY_SNAPSHOT_HEADER[5]}
                  <DataGridHeaderSort
                    direction={sortedColumns[5]}
                    onClick={() => handleSortingColumn(5)}
                  />
                </Box>
              </DataGridHeader>
              <DataGridHeader aria-sort={sortedColumns[6]}>
                <Box display="flex" alignItems="center" columnGap="space20">
                  {DAILY_SNAPSHOT_HEADER[6]}
                  <DataGridHeaderSort
                      direction={sortedColumns[6]}
                      onClick={() => handleSortingColumn(6)}
                  />
                </Box>
              </DataGridHeader>
              <DataGridHeader>{DAILY_SNAPSHOT_HEADER[7]}</DataGridHeader>
              <DataGridHeader>{DAILY_SNAPSHOT_HEADER[8]}</DataGridHeader>
            </DataGridRow>
          </DataGridHead>
          <DataGridBody>
            {TableBodyData.map(
              (row: TableBodyDataType[number], rowIndex: number) => (
                <DataGridRow key={"row-" + rowIndex}>
                  {row.map((col, colIndex) => (
                    <DataGridCell key={"cell-" + rowIndex + "-" + colIndex}>
                      <RenderCell
                        col={col}
                        colIndex={colIndex}
                        rowIndex={rowIndex}
                      />
                    </DataGridCell>
                  ))}
                </DataGridRow>
              )
            )}
          </DataGridBody>
        </DataGrid>
      </Box>

      <Box display="flex" justifyContent="center" marginTop="space70">
        <AdaptivePagination
          current={currentPage}
          itemCount={TOTAL_PAGES * 50}
          pageSize={50}
          goToPage={handlePagination}
        />
      </Box>
    </>
  );
};

[margitkuhlberg]

Hi @nkrantz ! Do you see anything being off from the info I have provided?

Also, do you have information when the Data Grid could be ready for use in production as it's showing 'Alpha' state on the Data Grid page?

[nkrantz]

Could you drop the above code into the Paste starter template CodeSandbox? It'll help us debug whatever is going on. We created an example CodeSandbox of how to implement sortable columns so it might help to take a look there too.

[margitkuhlberg]

I worked out what the issue was: I had to hardcode initialHeaderData as mapping the array did not work for me. The array that was suppose to give data to DataGridHeaderSort was empty.

[nkrantz]

Thanks for the update! Glad you got it working.