在 table 中显示一个新列

Question

目标：
添加一个包含 url link 的新列。新列的内容应该是名字和姓氏。 link 应该是 www.google.com 在所有单元格中。

问题：
我不习惯反应-table 我该怎么做？

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

信息：
*反应新手-table

谢谢！

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()
}

Answer 1

首先，我们需要从 makeData 函数编辑我们想要 return 的内容，为此我们应该编辑 newPerson 并添加 url、firstNameUrl 和 lastNameUrl。这为我们设置了三个新的 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"
  };
};

现在我们有了新的数据键，我们可以简单地告诉 react-table 通过编辑 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"
          }
        ]
      }
    ],
    []
  );

codepen我已经编辑好了，你可以找到here

@编辑

如果你想渲染一个自定义组件，那么你可以这样做：

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

这将呈现为具有 accessor 值的 link 元素 - 我还更新了 codepen

在 table 中显示一个新列

Display a new column in the table

reactjs

react-table

react-tsx