#Add sorting to a nextui Table component

2 messages · Page 1 of 1 (latest)

light remnant
#

So I have a page in my next.js project that gets two or more parameters. The code is simplified here but it's basically this one:

export async function getStaticPaths() {
    const param1Data = await fetch('http://IP:PORT/getData/getPossibleParam1Ids');
    const param2Data = await fetch('http://IP:PORT/getData/getPossibleParam2Ids');

    const firstParams = await releasesData.json();
    const secondParams = await buildsData.json();

    const paramsArray = [];
    firstParams.forEach((firstParam) => {
        secondParams.forEach((secondParam) => {
            paramsArray.push({ params: { params: [firstParam.id.toString(), secondParam.id.toString()] } })
        });
    });

    return {
        paths: paramsArray,
        fallback: "blocking"
    };
}

export const getStaticProps = async ({ params }) => {
    const [param1, param2, extraParam] = params.params;

    const url = `http://IP:PORT/getData/${param1}/${param2}`;
    const res = await fetch(url);
    const data = await res.json();

    if (data.statusCode) {
        return {
            notFound: true
        }
    }

    const myKey = data[0][extraParam].key;
    const myData = data[2][myKey];

    return {
        props: {
            toUseData: myData,
        }
    }
}

I'm trying to add sorting capabilities to the table but nothing works. The example I saw in nextui.org doesn't use getStaticProps() so I don't understand how to do it.

#

The rest of the code:

const Home = ({ toUseData }: { toUseData: any }) => {
    return (
        <SSRProvider>
            <>
                <Dashboard toUseData={toUseData}>
                    <span>
                        <Table
                            compact
                            aria-label="Example table with custom cells"
                            css={{
                                height: "auto",
                                minWidth: "100%",
                            }}
                            selectionMode="multiple"
                        >
                            <Table.Header columns={columns}>
                                {(column) => (
                                    <Table.Column
                                        key={column.key}
                                        hideHeader={column.key === "actions"}
                                        align={column.key === "actions" ? "center" : "start"}
                                    >
                                        {column.label}
                                    </Table.Column>
                                )}
                            </Table.Header>
                            <Table.Body items={toUseData[0]}>
                                {toUseData.map((item: MyType, index: number) => (
                                    <Table.Row key={index}>
                                        {(columnKey) => (
                                            <Table.Cell>{tableRenderCell(item, columnKey, index)}</Table.Cell>
                                        )}
                                    </Table.Row>
                                ))}
                            </Table.Body>
                        </Table>
                    </span>
                </Dashboard>
            </>
        </SSRProvider>
    );
}

export default Home;