CODEWITHSUNDEEP
reactjsreact-table-v7
timbo245
timbo245

Reputation: 194

React-Table make one cell a link

I am working on a react-app that displays data in a table format. I am using react-table to format the data. I want to make one of the cells a link to a project description page. I do not want the whole row to be 'clickable'. I am retrieving the data from a backend server to populate the rows. Below is a copy of my react code:

import React, { useEffect, useMemo } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useTable } from 'react-table';
import { Table } from 'react-bootstrap';
import { PROJECT_COLUMNS } from '../columns/columns';
import { projectsDetails } from '../actions/projectActions';

import Button from '../components/Button';

const ProjectSummary = () => {
  const dispatch = useDispatch();

  const projectDetails = useSelector(state => state.projectDetails);
  const { loading, error, projects } = projectDetails;

  useEffect(() => {
    dispatch(projectsDetails());
  }, [dispatch]);

  const columns = useMemo(() => PROJECT_COLUMNS, []);
  const data = useMemo(() => projects, []);

  const tableInstance = useTable({
    columns,
    data
  });

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow
  } = tableInstance;

  console.log(data._id);

  return (
    <Table
      striped
      className='table-responsive-sm table-responsive-md'
      {...getTableProps()}
    >
      <thead>
        {headerGroups.map(headerGroups => (
          <tr {...headerGroups.getHeaderGroupProps()}>
            {headerGroups.headers.map(column => (
              <th {...column.getHeaderProps()}>{column.render('Header')}</th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map(row => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map(cell => {
                return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>;
              })}
            </tr>
          );
        })}
      </tbody>
    </Table>
  );
};

export default ProjectSummary;

and here is the column that they are mapped from.

import Moment from 'react-moment';
import { Link } from 'react-router-dom';

export const PROJECT_COLUMNS = [
  {
    Header: 'Status',
    accessor: 'status'
  },
  {
    Header: 'Name',
    accessor: 'name'
  },
  {
    Header: 'Project Id',
    accessor: 'projectId'
  },
  {
    Header: 'Start Date',
    accessor: 'startDate',
    Cell: ({ row }) => <Moment format='MM/DD/YYYY'></Moment>
  },
  {
    Header: 'End Date',
    accessor: 'endDate',
    Cell: ({ row }) => <Moment format='MM/DD/YYYY'></Moment>
  },

  {
    Header: 'Type',
    accessor: 'type'
  },
  {
    Header: 'Location',
    accessor: 'state'
  }
];

Upvotes: 2

Views: 10606

Answers (2)

Nagaajay k
Nagaajay k

Reputation: 77

export const COLUMNS = [
{
    Header:'Id',
    accessor: 'id',
    Cell: props => <a href="url">{props.value}</a>
}

Now your id column values will be click able to url. you can change the url link as your requirement. {props.value} makes your table values to be dynamic, that is value will be displayed from server.

Upvotes: 1

Tim Dowd
Tim Dowd

Reputation: 205

{
    Header: 'Link',
    accessor: [link],
    Cell: props => <a href="url"> project details</a>
}

and if you dont want to hardcode the url because it exists in your data, use props.original.row.nameOfUrlProperty

Upvotes: 2

Related Questions