如何在React-Table中添加包含URL链接的新列？

Hey there! Since you're new to React-Table, let's walk through exactly how to add that new column showing the full name (first + last) as a link to Google. It's simpler than you might think—here's what you need to do:

Step 1: Define the Custom Column #

Instead of using a basic accessor like your existing columns, we'll create a custom Cell renderer. This lets us combine the first and last name, then wrap it in an anchor tag.

In your App component's columns array, add a new column (we'll slot it into the "Name" group for consistency):

{
  Header: 'Full Name',
  Cell: ({ row }) => (
    <a 
      href="https://www.google.com" 
      target="_blank" 
      rel="noopener noreferrer"
    >
      `${row.values.firstName} ${row.values.lastName}`
    </a>
  ),
}

Quick breakdown: #

• Cell: ({ row }): This function gives us access to the current row's data via row.values.
• We combine firstName and lastName into a single string for the link text.
• The <a> tag points to Google, with target="_blank" to open in a new tab and rel="noopener noreferrer" for security best practices.

Step 2: Update Your Full Columns Array #

Here's how your complete columns array will look with the new column added:

const columns = React.useMemo(
  () => [
    {
      Header: 'Name',
      columns: [
        {
          Header: 'First Name',
          accessor: 'firstName',
        },
        {
          Header: 'Last Name',
          accessor: 'lastName',
        },
        // New Full Name column with Google link
        {
          Header: 'Full Name',
          Cell: ({ row }) => (
            <a 
              href="https://www.google.com" 
              target="_blank" 
              rel="noopener noreferrer"
            >
              `${row.values.firstName} ${row.values.lastName}`
            </a>
          ),
        },
      ],
    },
    {
      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' },
      ],
    },
  ],
  []
)

Step 3: Test It Out #

Once you save the changes, React-Table will automatically render the new column. Each cell will display the combined full name, and clicking any of them will take you to Google.

The big takeaway here is that React-Table's Cell prop lets you fully customize what gets rendered in each table cell—perfect for cases where you need more than just plain text!

内容的提问来源于stack exchange，提问作者HelloWorld1