How to sort on multiple column (table) in FluentUI v9 ?

[pellea]

Hello,

How to sort on multiple column (table) in FluentUI v9 ?
How to to use the mandatory "compare", that is totally useless, if the sorting occurs server-side ?

Thanks.

[mathis-m]

You need to fall back to the Table component:

import {
    Avatar,
    Body2,
    createTableColumn,
    PresenceBadgeStatus,
    Table,
    TableBody,
    TableCell,
    TableCellLayout,
    TableColumnDefinition,
    TableColumnId,
    TableHeader,
    TableHeaderCell,
    TableRow,
    useTableFeatures,
    useTableSort,
} from "@fluentui/react-components";
import React, { useCallback, useState } from "react";

import {
    DocumentPdfRegular,
    DocumentRegular,
    EditRegular,
    FolderRegular,
    OpenRegular,
    PeopleRegular,
    VideoRegular,
} from "@fluentui/react-icons";

const initialItems: Item[] = [
    {
        file: { label: "Meeting notes", icon: <DocumentRegular /> },
        author: { label: "Max Mustermann", status: "available" },
        lastUpdated: { label: "7h ago", timestamp: 3 },
        lastUpdate: {
            label: "You edited this",
            icon: <EditRegular />,
        },
    },
    {
        file: { label: "Thursday presentation", icon: <FolderRegular /> },
        author: { label: "Erika Mustermann", status: "busy" },
        lastUpdated: { label: "Yesterday at 1:45 PM", timestamp: 2 },
        lastUpdate: {
            label: "You recently opened this",
            icon: <OpenRegular />,
        },
    },
    {
        file: { label: "Training recording", icon: <VideoRegular /> },
        author: { label: "John Doe", status: "away" },
        lastUpdated: { label: "Yesterday at 1:45 PM", timestamp: 2 },
        lastUpdate: {
            label: "You recently opened this",
            icon: <OpenRegular />,
        },
    },
    {
        file: { label: "Purchase order", icon: <DocumentPdfRegular /> },
        author: { label: "Jane Doe", status: "offline" },
        lastUpdated: { label: "Tue at 9:30 AM", timestamp: 1 },
        lastUpdate: {
            label: "You shared this in a Teams chat",
            icon: <PeopleRegular />,
        },
    },
];

type FileCell = {
    label: string;
    icon: JSX.Element;
};

type LastUpdatedCell = {
    label: string;
    timestamp: number;
};

type LastUpdateCell = {
    label: string;
    icon: JSX.Element;
};

type AuthorCell = {
    label: string;
    status: PresenceBadgeStatus;
};

type Item = {
    file: FileCell;
    author: AuthorCell;
    lastUpdated: LastUpdatedCell;
    lastUpdate: LastUpdateCell;
};

const columns: TableColumnDefinition<Item>[] = [
    createTableColumn<Item>({
        columnId: "file",
        renderHeaderCell: () => "File",
        renderCell: (item) => <TableCellLayout media={item.file.icon}>{item.file.label}</TableCellLayout>,
    }),
    createTableColumn<Item>({
        columnId: "author",
        renderHeaderCell: () => "Author",
        renderCell: (item) => (
            <TableCellLayout
                media={
                    <Avatar
                        aria-label={item.author.label}
                        name={item.author.label}
                        badge={{
                            status: item.author.status as PresenceBadgeStatus,
                        }}
                    />
                }>
                {item.author.label}
            </TableCellLayout>
        ),
    }),
    createTableColumn<Item>({
        columnId: "lastUpdated",
        renderHeaderCell: () => "Last Updated",
        renderCell: (item) => item.lastUpdated.label,
    }),
    createTableColumn<Item>({
        columnId: "lastUpdate",
        renderHeaderCell: () => "Last Update",
        renderCell: (item) => (
            <TableCellLayout media={item.lastUpdate.icon}>{item.lastUpdate.label}</TableCellLayout>
        ),
    }),
];

export const MyNewTest = React.memo(function CustomDataSetComponent() {
    const [items, setItems] = useState(initialItems);
    const [loadingItems, setLoadingItems] = useState(false);

    const doServerSideSort = useCallback(async () => {
        setLoadingItems(true);
        // Do api request with new sort query
        // Set new items

        // MOCK
        await new Promise<void>((resolve) => {
            setTimeout(() => {
                setItems([...initialItems]);
                resolve();
            }, 1000);
        });

        setLoadingItems(false);
    }, []);

    const [sortState, setSortState] = React.useState<{
        sortDirection: "ascending" | "descending";
        sortColumn: TableColumnId | undefined;
    }>({
        sortDirection: "ascending" as const,
        sortColumn: "file",
    });

    const {
        getRows,
        sort: { getSortDirection, toggleColumnSort },
    } = useTableFeatures(
        {
            columns,
            items,
        },
        [
            useTableSort({
                sortState,
                onSortChange: (e, nextSortState) => {
                    setSortState(nextSortState);
                    // noinspection JSIgnoredPromiseFromCall
                    doServerSideSort();
                },
            }),
        ]
    );

    const headerSortProps = (columnId: TableColumnId) => ({
        onClick: (e: React.MouseEvent) => toggleColumnSort(e, columnId),
        sortDirection: getSortDirection(columnId),
    });

    const rows = getRows();

    return (
        <Table sortable aria-label="Table with controlled sort" style={{ minWidth: "500px" }}>
            <TableHeader>
                <TableRow>
                    {columns.map((col) => {
                        return (
                            <TableHeaderCell key={col.columnId} {...headerSortProps(col.columnId)}>
                                {col.renderHeaderCell()}
                            </TableHeaderCell>
                        );
                    })}
                </TableRow>
            </TableHeader>
            <TableBody>
                {loadingItems && <Body2>Loading...</Body2>}
                {!loadingItems &&
                    rows.map(({ item }) => (
                        <TableRow key={item.file.label}>
                            {columns.map((col) => {
                                return <TableCell key={col.columnId}>{col.renderCell(item)}</TableCell>;
                            })}
                        </TableRow>
                    ))}
            </TableBody>
        </Table>
    );
});