Custom sort dynamic table atlaskit

Atlassian Ecosystem Design
,
1

Hello,

Could you please let me know how can I implement custom sort in a dynamic table?
The onSort property seems to be just a ‘notification’ mechanism and default sort happens when using DynamicTableStateless component.

Thank you

2

Hi @mabo
Here is an example of a custom sort for DynamicTable component. You can find a working example here:

https://bitbucket.org/itsuperhighway/forge-atlaskit-dynamic-table-custom-sort/src/v.2/

and detailed explanation here:

import React, { useEffect, useState } from "react";
import { invoke } from "@forge/bridge";
import DynamicTable from "@atlaskit/dynamic-table";

const caption = "Example issue with DynamicTable";

const head = {
  cells: [
    {
      key: "number",
      content: "Number",
      isSortable: true,
    },
    {
      key: "string",
      content: "String",
      isSortable: true,
    },
  ],
};

const tableData = [
  [1, "d"],
  [2, "c"],
  [3, "a"],
  [4, "b"],
];
const rows = tableData.map(([number, letter]) => ({
  key: number.toString(),
  cells: [
    {
      key: number,
      content: number,
    },
    {
      key: letter,
      content: letter,
    },
  ],
}));

function App() {
  const [data, setData] = useState(null);
  const [tableRows, setTableRows] = useState(rows);

  useEffect(() => {
    invoke("getText", { example: "my-invoke-variable" }).then(setData);
  }, []);

  const sortTable = (sortParams) => {
    console.log(sortParams);
    tableData.sort((a, b) => a[1].localeCompare(b[1]));
    console.log(tableData);
    setTableRows(
      tableData.map(([number, letter]) => ({
        key: number.toString(),
        cells: [
          {
            key: number,
            content: number,
          },
          {
            key: letter,
            content: letter,
          },
        ],
      }))
    );
  };

  return (
    <div>
      {data ? data : "Loading..."}
      <DynamicTable
        caption={caption}
        head={head}
        rows={tableRows}
        isFixedSize
        onSort={sortTable}
      />
    </div>
  );
}

export default App;
2 Likes
3

Thank you very much @alex_sam for taking the time to answer this question.
Unfortunately, it does not work … although it seems on first click.

If you don’t set defaultSortKey and defaultSortOrder (or sortKey and sortOrder), the internal sortKey and sortOrder will remain undefined and when you click the header it will call the onSort handler with the cell’s key and sortOrder always set to ‘ASC’ (because the internal sortOrder is undefined).

If you configure those properties: the moment you update the rows property, the component will recalculate its internal state and re-order the rows using its internal algorithm.

Thank you though,
Bogdan

4

Hi Bogdan!
Yes, correct. It does not work if you set sortOrder and sortKey. The only thing which it does except sorting it also sets icons near in the headers. But if you use a custom sort, then how correct this icons would be if you set the icons? Also if you need to control ASC and DESC for your sort algorithm then you can have a state variable and have a look at it instead of the props passed to the function.

5

Hi @alex_sam ,

The scenario where I wanted to use custom sort is the following: the last row in my table is a row containing the vertical sum for each column.
While I want to be able to sort by each column, I want the totals row to remain the last row no matter the order for the other rows. A footer would have been great for this case, but I figured I could use custom sort to keep the totals on the last row. The order would still be ASC and DESC, and the icons would still represent the regular behavior.

Probably I could just give up on the sorting mechanism of the dynamic table and use the onClick from the content of the header cell …

Thank you,
Bogdan