在表中显示新列(column display)

目标:添加一个包含 url 链接的新列。新列的内容应为 first name 和 lastname。所有单元格中的链接应为www.google.com。

目标:
添加一个包含 url 链接的新列。新列的内容应为 first name 和 lastname。所有单元格中的链接应为www.google.com

问题:
我不习惯反应表,我该怎么办?

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

信息:
* 反应表中的新手

非常感谢。

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

首先,我们需要编辑我们想要从 makeData 函数返回的内容,为此,我们应该编辑 newPerson 并添加 url,firstNameUrl 和 lastNameUrl。这为我们设置了三个新的访问器

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

这将呈现为具有访问器值的链接元素-我还更新了 codeph

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(274)
CSS使用现有类创建新类定义(从库中)
上一篇
Plaid-error_code:'ITEM_LOGIN_REQUIRED'。每小时左右重复一次
下一篇

相关推荐

  • vscode code命令:# 如何使用 VSCode 命令

    VSCode Code命令是Visual Studio Code的一个内置命令,用于在本地和远程服务器上执行代码。它可以让你在不同的系统上运行代码,而不需要安装任何软件。…

    2023-01-22 09:55:35
    0 78 94
  • cv糖醋排骨是弯的吗弯曲的美味

    cv糖醋排骨不是弯的,它是一种制作方法,通常用来制作排骨。代码:…

    2023-01-30 08:19:31
    0 67 68
  • cv树洞柒夜事件CV树洞中的秘密与惊奇

    cv树洞柒夜事件是一个有趣的计算机视觉活动,它提供了一种新的方式来利用计算机视觉技术来探索和发现景观。它始于2020年7月,由一群热爱计算机视觉的研究者和开发者发起,他们希望通过使用机器学习技术来探索景观中的精彩之处。cv树洞柒夜事件的目标是使用机器学习技术来探索景观中的精彩之处,并利用这些发现来改善景观设计。参与者需要使用机器学习技术来探索景观,并利用这些发现来改善景观设计。参与者可以使用Python,OpenCV,TensorFlow等技术来完成任务,并将其发布在GitHub上。…

    2023-01-08 12:49:50
    0 75 73
  • cv小随:如何利用CV技术提升求职成功率

    示例示例cv小随是一种基于计算机视觉的智能技术,它可以帮助用户自动识别图像中的物体、场景和行为,从而实现自动化的图像处理。cv小随可以用于多种应用场景,如图像搜索、图像分类、图像识别、图像检测等。…

    2023-01-01 11:12:42
    0 81 12
  • win10可以安装cad2007吗:CAD2007是否可以在Win10上安装?

    不可以,因为CAD2007不支持Windows 10系统。如果想要安装CAD2007,需要安装在Windows XP或者Windows 7系统上。…

    2023-01-20 02:04:42
    0 12 64
  • iban code是什么意思一种国际银行帐户号码标准

    IBAN(International Bank Account Number)代码是一种国际标准的银行账户号码,用于在不同国家之间进行国际转账。它由一串字母和数字组成,通常由2至4个字母开头,后面跟着一串数字。…

    2022-12-30 09:24:47
    0 17 99
  • cv 机器视觉:如何利用机器视觉技术提高图像处理效率

    CV(Computer Vision)机器视觉是一门研究计算机如何理解和处理图像的学科,它旨在使计算机能够以人类般的方式识别和理解图像。它主要应用于图像处理、图像分析、计算机视觉等领域,广泛应用于机器人、自动驾驶、医疗影像分析等领域。…

    2023-01-23 11:32:51
    0 19 53
  • mac 开发c++:Mac 下开发 C++ 的入门指南

    示例示例Mac OS X 是一个强大的操作系统,可以用来开发 C++ 应用程序。下面是一个简单的 C++ 程序的代码示例:#include…

    2023-01-02 10:39:58
    0 20 21

发表评论

登录 后才能评论

评论列表(32条)