如何在没有打字记录的情况下实现反应表？
如何在没有打字记录的情况下实现反应表？
提问于 2022-09-28 17:38:48
我想向我的React项目中添加一些复杂的表。我做了一些研究，发现react-table是最好的选择之一。我安装了最新版本的v8.5.13，但是当我查看文档时，所有的示例都是用TypeScript实现的。我对TypeScript不是很熟悉，我的问题是:有没有可能实现没有TypeScript的react-table的最新版本？如果是，请提供一些例子。
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-09-30 02:20:17
根据反应表v8的官方代表，这是对TypeScript的完全重写。但是您可以在不使用TypeScript的情况下实现react table的最新版本，只需将代码从类型记录转换为javascript即可。
示例：这是使用TypeScript编写的react表文档中的基本react表，并转换为javascript：
Index.js：
import * as React from 'react'
import ReactDOM from "react-dom";
import './index.css'
import {
createColumnHelper,
flexRender,
getCoreRowModel,
useReactTable,
} from '@tanstack/react-table'
const defaultData = [
{
firstName: 'tanner',
lastName: 'linsley',
age: 24,
visits: 100,
status: 'In Relationship',
progress: 50,
},
{
firstName: 'tandy',
lastName: 'miller',
age: 40,
visits: 40,
status: 'Single',
progress: 80,
},
{
firstName: 'joe',
lastName: 'dirte',
age: 45,
visits: 20,
status: 'Complicated',
progress: 10,
},
]
const columnHelper = createColumnHelper()
const columns = [
columnHelper.accessor('firstName', {
cell: info => info.getValue(),
footer: info => info.column.id,
}),
columnHelper.accessor(row => row.lastName, {
id: 'lastName',
cell: info => <i>{info.getValue()}</i>,
header: () => <span>Last Name</span>,
footer: info => info.column.id,
}),
columnHelper.accessor('age', {
header: () => 'Age',
cell: info => info.renderValue(),
footer: info => info.column.id,
}),
columnHelper.accessor('visits', {
header: () => <span>Visits</span>,
footer: info => info.column.id,
}),
columnHelper.accessor('status', {
header: 'Status',
footer: info => info.column.id,
}),
columnHelper.accessor('progress', {
header: 'Profile Progress',
footer: info => info.column.id,
}),
]
function App() {
const [data, setData] = React.useState(() => [...defaultData])
const rerender = React.useReducer(() => ({}), {})[1]
const table = useReactTable({
data,
columns,
getCoreRowModel: getCoreRowModel(),
})
return (
<div className="p-2">
<table>
<thead>
{table.getHeaderGroups().map(headerGroup => (
<tr key={headerGroup.id}>
{headerGroup.headers.map(header => (
<th key={header.id}>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.header,
header.getContext()
)}
</th>
))}
</tr>
))}
</thead>
<tbody>
{table.getRowModel().rows.map(row => (
<tr key={row.id}>
{row.getVisibleCells().map(cell => (
<td key={cell.id}>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</td>
))}
</tr>
))}
</tbody>
<tfoot>
{table.getFooterGroups().map(footerGroup => (
<tr key={footerGroup.id}>
{footerGroup.headers.map(header => (
<th key={header.id}>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.footer,
header.getContext()
)}
</th>
))}
</tr>
))}
</tfoot>
</table>
<div className="h-4" />
<button onClick={() => rerender()} className="border p-2">
Rerender
</button>
</div>
)
}
ReactDOM.render(
<App/>
,
document.getElementById("root")
);Stack Overflow用户
发布于 2022-09-28 18:04:08
基本上，react表只是一个基于实用程序的表libreay，这意味着它不提供任何样式。
下面是react表的一个示例
import React from "react"
import makeData from "./makeDats" // some dummy data
import { useTable } from 'react-table'
function TableComponent (){
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',
},
],
},
],
[]
)
const data = React.useMemo(() => makeData(20), [])
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>
)
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73885732
复制相关文章
相似问题
腾讯云开发者
