Merge pull request #443 from NMFS-RADFish/208-new-table---set-default-sortable-column

208 new table   set default sortable column

Author: thgaskell

examples/simple-table/src/pages/Home.jsx

@@ -132,7 +132,13 @@ const HomePage = () => {
           onPageChange: onPageChange,
           totalRows: data.length,
         }}
-        onRowClick={(row) => {console.log("Row clicked:", row)}}
+        onRowClick={(row) => {
+          console.log("Row clicked:", row);
+        }}
+        defaultSort={[
+          { key: "price", direction: "asc" },
+          { key: "species", direction: "desc" },
+        ]}
         striped
         bordered
       />

packages/react-radfish/table/Table.spec.jsx

@@ -69,16 +69,7 @@ describe("Table", () => {
       { key: "Age", label: "Age", sortable: true },
     ];
 
-    const onPageChangeMock = vi.fn();
-
-    const paginationOptions = {
-      pageSize: 4,
-      currentPage: 1,
-      onPageChange: onPageChangeMock,
-      totalRows: data.length,
-    };
-
-    render(<Table data={data} columns={columns} />);
+    render(<Table data={data} columns={columns}/>);
 
     // First click on Age sorts by Age ascending
     fireEvent.click(screen.getByText("Age"));
@@ -216,4 +207,62 @@ describe("Table", () => {
     // Restore the original console.error
     consoleErrorSpy.mockRestore();
   });
+
+  it("applies defaultSort correctly and renders rows in the expected order", () => {
+    const data = [
+      { id: 1, firstName: "Alice", lastName: "Smith", age: 25 },
+      { id: 2, firstName: "Bob", lastName: "Jones", age: 30 },
+      { id: 3, firstName: "Charlie", lastName: "Smith", age: 20 },
+      { id: 4, firstName: "Dave", lastName: "Jones", age: 40 },
+      { id: 5, firstName: "Eva", lastName: "Brown", age: 35 },
+    ];
+
+    const columns = [
+      { key: "firstName", label: "First Name", sortable: true },
+      { key: "lastName", label: "Last Name", sortable: true },
+      { key: "age", label: "Age", sortable: true },
+    ];
+
+    const defaultSort = [
+      { key: "lastName", direction: "asc" },
+      { key: "firstName", direction: "desc" },
+    ];
+
+    const onPageChangeMock = vi.fn();
+
+    const paginationOptions = {
+      pageSize: 5,
+      currentPage: 1,
+      onPageChange: onPageChangeMock,
+      totalRows: data.length,
+    };
+
+    render(
+      <Table
+        data={data}
+        columns={columns}
+        defaultSort={defaultSort}
+        paginationOptions={paginationOptions}
+      />,
+    );
+
+    // Get all data rows (excluding the header row)
+    const rows = screen.getAllByRole("row").slice(1); // Remove header row
+
+    // Expected order based on defaultSort
+    const expectedOrder = [
+      { firstName: "Eva", lastName: "Brown" },
+      { firstName: "Dave", lastName: "Jones" },
+      { firstName: "Bob", lastName: "Jones" },
+      { firstName: "Charlie", lastName: "Smith" },
+      { firstName: "Alice", lastName: "Smith" },
+    ];
+
+    // Assert that the rows are in the expected order
+    expectedOrder.forEach((expectedData, index) => {
+      const row = rows[index];
+      expect(within(row).getByText(expectedData.firstName)).toBeInTheDocument();
+      expect(within(row).getByText(expectedData.lastName)).toBeInTheDocument();
+    });
+  });
 });

packages/react-radfish/table/index.jsx

@@ -89,8 +89,16 @@ const TableStructure = ({ data, columns, handleSort, sortState, onRowClick }) =>
  * @returns {JSX.Element} The rendered table component.
  */
 
-const RADFishTable = ({ data, columns, paginationOptions, className, onRowClick, ...props }) => {
-  const [sortState, setSortState] = useState([]);
+const RADFishTable = ({
+  data,
+  columns,
+  paginationOptions,
+  onRowClick,
+  defaultSort,
+  className,
+  ...props
+}) => {
+  const [sortState, setSortState] = useState(defaultSort || []);
   const [pageIndex, setPageIndex] = useState(
     paginationOptions?.currentPage ? paginationOptions.currentPage - 1 : 0,
   );