Using React Data Table sortBy

[nschwake]

Is anyone able to help with an example of how to use the sortBy Action with a Data Table in React? I don't understand where I actually make the call to sortBy() with my header key.

Here is my render Prop:

const dataTableProp = ({ rows, headers, getTableProps, getHeaderProps, getRowProps, getTableContainerProps, getSelectionProps, sortBy }) => (
      <TableContainer
          title="Leases Parsed"
          // use Template Literal Strings to create an inline object to show the dynamic value.
          description={[`Found ${leasesToSelect.length} Leases`]}
          {...getTableContainerProps()} >
        <Table {...getTableProps()} size='md' >
          <TableHead>
            <TableRow>
              <th scope="col" />
              {headers.map((header) => (
                  <TableHeader key={header.id}  {...getHeaderProps({ header })}   >
                    {header.header}
                  </TableHeader>
              ))}
            </TableRow>
          </TableHead>
          <TableBody>
            {rows.map((row) => (
                <TableRow key={row.id}  {...getRowProps({ row })}>
                  <TableSelectRow key={'selectrow-'+row.id}
                                  {...getSelectionProps({ row })}
                      // write it as below (as a function) instead of 'onChange={saveSelectedRow(row)}' so that a parameter can be passed that react will not choke on.
                                  onChange={() => saveSelectedRow(row)}
                  />
                  {row.cells.map((cell) => (
                      <TableCell key={cell.id}>{cell.value}</TableCell>
                  ))}
                </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
  );

Here is rendering of the Data Table:

return (
        <div>
          <DataTable rows={leasesToSelect} headers={headers} radio isSortable render={dataTableProp} />
        </div>
);