REACT- Redirection Link not working and applying filters on table

Question

I have my table that displays all the id and title of my menu (1) (see menus.json). I want to add an hyperlink to my title but it doesn't work:

{
    Header: "Title",
    // accessor: "title"
    accessor: (row) => row.title,
    // Link the content of my cell. NOT WORKING 
    Cell: ({ row }) => (
      <Link to={{ pathname: `/menu/${row.id}` }}>{row.title}</Link>
    )
}

By clicking on my title name,ex Menu1 (1), it will redirect me to a new page with a table that contains all the names of the menus that match my id_menu (2) .

Here the sandbox link: https://codesandbox.io/s/frosty-tree-ggwuty?

Thanks for your time.

Answer 1

The Cell appears to used for formatting of a value. accessor property is only telling the hook how to access and read values from your data.

• Cell: Function | React.Component => JSX
  • Optional
  • Defaults to ({ value }) => String(value)
  • Receives the table instance and cell model as props
  • Must return valid JSX
  • This function (or component) is primarily used for formatting the column value, eg. If your column accessor returns a date object, you can use a Cell function to format that date to a readable format.

Emphasis is mine.

Use the accessor property to read the row value and return the value you want to access in the Cell function. You can either return the entire row value, or create a new object with the specific properties you want to use to render. In the Cell function access the value property and return the JSX, i.e. computed Link component.

const data = useMemo(
  () => [
    {
      Header: "Id",
      // accessor: "id"
      accessor: (row) => row.id
    },
    {
      Header: "Title",
      // accessor: "title"
      accessor: (row) => ({ title: row.title, id: row.id }),
      Cell: ({ value }) => (
        <Link to={{ pathname: `/menu/${value.id}` }}>{value.title}</Link>
      )
    }
  ],
  []
);

You will need to also import and use a router component and create routes to render each different table you want to render (i.e. one for each view you shared).

For the purpose of getting the existing Link you were trying to use working I only wrapped the Display component in a BrowserRouter. You'll need to create the routes you actually want to render different table content into.

Build out routes for each table you want to display.

Example:

App

<Router>
  <Routes>
    <Route path="/menu" element={<Display />} />
    <Route path="/menu/:menuId" element={<MenuDisplay />} />
    <Route path="*" element={<Navigate to="/menu" replace />} />
  </Routes>
</Router>

MenuDisplay

function MenuDisplay() {
  const { menuId } = useParams();
  const { match } = JsonData;

  const matchData = match.find((el) => el._id_menu === menuId)?._ids ?? [];

  const data = useMemo(
    () => [
      {
        Header: "Name",
        accessor: (row) => row.name
      },
      {
        Header: "Description",
        accessor: (row) => row.description
      },
      {
        Header: "Dishes",
        accessor: (row) => row.dishes,
        Cell: ({ value }) => Object.values(value[0]).join(", ")
      }
    ],
    []
  );

  const initialState = {
    sortBy: [
      { desc: false, id: "id" },
      { desc: false, id: "description" },
      { desc: false, id: "dishes" }
    ]
  };

  return (
    <Table
      data={matchData}
      columns={data}
      initialState={initialState}
      withCellBorder
      withRowBorder
      withSorting
      withPagination
    />
  );
}