Goal:
Add a new column that contain a url link. The content of the new column should be first name and lastname. The link should be www.google.com in all cell.

Problem:
I'm not used to react-table and how do I do´it?

Codesandbox:
https://codesandbox.io/s/exciting-ganguly-7w2d84

Info:
*newbie in react-table

Thank you!

app.js

    import React from 'react'
    import styled from 'styled-components'
    import { useTable } from 'react-table'
    
    import makeData from './makeData'
    
    const Styles = styled.div`
      padding: 1rem;
    
      table {
        border-spacing: 0;
        border: 1px solid black;
    
        tr {
          :last-child {
            td {
              border-bottom: 0;
            }
          }
        }
    
        th,
        td {
          margin: 0;
          padding: 0.5rem;
          border-bottom: 1px solid black;
          border-right: 1px solid black;
    
          :last-child {
            border-right: 0;
          }
        }
      }
    `
    
    function Table({ columns, data }) {
      // Use the state and functions returned from useTable to build your UI
      const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        rows,
        prepareRow,
      } = useTable({
        columns,
        data,
      })
    
      // Render the UI for your table
      return (
        <table {...getTableProps()}>
          <thead>
            {headerGroups.map(headerGroup => (
              <tr {...headerGroup.getHeaderGroupProps()}>
                {headerGroup.headers.map(column => (
                  <th {...column.getHeaderProps()}>{column.render('Header')}</th>
                ))}
              </tr>
            ))}
          </thead>
          <tbody {...getTableBodyProps()}>
            {rows.map((row, i) => {
              prepareRow(row)
              return (
                <tr {...row.getRowProps()}>
                  {row.cells.map(cell => {
                    return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
                  })}
                </tr>
              )
            })}
          </tbody>
        </table>
      )
    }
    
    function App() {
      const columns = React.useMemo(
        () => [
          {
            Header: 'Name',
            columns: [
              {
                Header: 'First Name',
                accessor: 'firstName',
              },
              {
                Header: 'Last Name',
                accessor: 'lastName',
              },
            ],
          },
          {
            Header: 'Info',
            columns: [
              {
                Header: 'Age',
                accessor: 'age',
              },
              {
                Header: 'Visits',
                accessor: 'visits',
              },
              {
                Header: 'Status',
                accessor: 'status',
              },
              {
                Header: 'Profile Progress',
                accessor: 'progress',
              },
              {
                Header: 'Profile Progress1',
                accessor: 'progress2',
              },          
            ],
          },
        ],
        []
      )
    
      const data = React.useMemo(() => makeData(20), [])
    
      return (
        <Styles>
          <Table columns={columns} data={data} />
        </Styles>
      )
    }
    
    export default App


---------------

    makeData.js


import namor from 'namor'

const range = len => {
  const arr = []
  for (let i = 0; i < len; i  ) {
    arr.push(i)
  }
  return arr
}

const newPerson = () => {
  const statusChance = Math.random()
  return {
    firstName: namor.generate({ words: 1, numbers: 0 }),
    lastName: namor.generate({ words: 1, numbers: 0 }),
    age: Math.floor(Math.random() * 30),
    visits: Math.floor(Math.random() * 100),
    progress: Math.floor(Math.random() * 100),
    status:
      statusChance > 0.66
        ? 'relationship'
        : statusChance > 0.33
        ? 'complicated'
        : 'single',
  }
}

export default function makeData(...lens) {
  const makeDataLevel = (depth = 0) => {
    const len = lens[depth]
    return range(len).map(d => {
      return {
        ...newPerson(),
        subRows: lens[depth   1] ? makeDataLevel(depth   1) : undefined,
      }
    })
  }

  return makeDataLevel()
}

CodePudding user response：

First of all we need to edit what we want to return from makeData function, to do that we should edit newPerson and add url, firstNameUrl and lastNameUrl. This sets us three new accessors

const newPerson = () => {
  const statusChance = Math.random();
  return {
    firstName: namor.generate({ words: 1, numbers: 0 }),
    lastName: namor.generate({ words: 1, numbers: 0 }),
    age: Math.floor(Math.random() * 30),
    visits: Math.floor(Math.random() * 100),
    progress: Math.floor(Math.random() * 100),
    url: " www.google.com",
    firstNameUrl: namor.generate({ words: 1, numbers: 0 }),
    lastNameUrl: namor.generate({ words: 1, numbers: 0 }),
    status:
      statusChance > 0.66
        ? "relationship"
        : statusChance > 0.33
        ? "complicated"
        : "single"
  };
};

Now that we have new data keys we can simply tell react-table what to render out by editing column useMemo

const columns = React.useMemo(
    () => [
      {
        Header: "Name",
        columns: [
          {
            Header: "First Name",
            accessor: "firstName"
          },
          {
            Header: "Last Name",
            accessor: "lastName"
          }
        ]
      },
      {
        Header: "Info",
        columns: [
          {
            Header: "Age",
            accessor: "age"
          },
          {
            Header: "Visits",
            accessor: "visits"
          },
          {
            Header: "Status",
            accessor: "status"
          },
          {
            Header: "Profile Progress",
            accessor: "progress"
          }
        ]
      },
      {
        Header: "Url",
        columns: [
          {
            Header: "First Name",
            accessor: "firstNameUrl"
          },
          {
            Header: "Last Name",
            accessor: "lastNameUrl"
          },
          {
            Header: "Url",
            accessor: "url"
          }
        ]
      }
    ],
    []
  );

I have edited the codepen, you can find it here

@Edit

If you want to render a custom component then you can do this like below:

      {
        Header: "Last Name",
        accessor: "lastNameUrl",
        Cell: (e) => <a href="https://google.com"> {e.value} </a>
      }

This will render as link element with accessor value - I've also updated the codepen