javascript - 在 react-table v7 中动态更改显示的数据
问题描述
不确定是否有动态更改显示数据的好方法。例如,我希望将布尔值作为图标显示在表格中,并且不会过多地减慢渲染过程。我正在使用最新版本的 react-table v7。我已经从表格组件中添加了代码谢谢
import React from "react";
import { useTable, useRowSelect, useSortBy, usePagination } from "react-table";
import { CSVLink, CSVDownload } from "react-csv";
import { navigate } from "@reach/router";
function handleColumnsClick(url, id) {
if (url && id) navigate(`${url}${id}`);
}
const IndeterminateCheckbox = React.forwardRef(
({ indeterminate, ...rest }, ref) => {
const defaultRef = React.useRef();
const resolvedRef = ref || defaultRef;
React.useEffect(() => {
resolvedRef.current.indeterminate = indeterminate;
}, [resolvedRef, indeterminate]);
return (
<>
<input type="checkbox" ref={resolvedRef} {...rest} />
</>
);
}
);
function Table({ columns, data, allowSelection, direct }) {
// Use the state and functions returned from useTable to build your UI
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
selectedFlatRows,
// pagination
page, // Instead of using 'rows', we'll use page,
canPreviousPage,
canNextPage,
pageOptions,
pageCount,
gotoPage,
nextPage,
previousPage,
setPageSize,
state: { selectedRowIds, pageIndex, pageSize },
} = useTable(
{
columns,
data,
initialState: { pageIndex: 0 },
},
useSortBy,
usePagination,
useRowSelect,
(hooks) => {
hooks.visibleColumns.push((columns) => [
// Let's make a column for selection
{
id: "selection",
// The header can use the table's getToggleAllRowsSelectedProps method
// to render a checkbox
Header: ({ getToggleAllRowsSelectedProps }) => (
<div>
{allowSelection && (
<IndeterminateCheckbox {...getToggleAllRowsSelectedProps()} />
)}
</div>
),
// The cell can use the individual row's getToggleRowSelectedProps method
// to the render a checkbox
Cell: ({ row }) => (
<div>
{allowSelection && (
<IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
)}
</div>
),
},
...columns,
]);
}
);
// Render the UI for your table
return (
<>
<table
className="table table-sm table-striped table table-hover"
{...getTableProps()}
>
<thead>
{headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
// Add the sorting props to control sorting. For this example
// we can add them into the header props
<th
className="checkbox"
{...column.getHeaderProps(column.getSortByToggleProps())}
>
{column.render("Header")}
{/* Add a sort direction indicator */}
<span>
{column.isSorted
? column.isSortedDesc
? " "
: " "
: ""}
</span>
</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{page.map((row, i) => {
prepareRow(row);
return (
<tr {...row.getRowProps()}>
{row.cells.map((cell) => {
return (
<td
onClick={(e) =>
handleColumnsClick(
direct[1],
cell.row.original[direct[0]]
)
}
{...cell.getCellProps()}
>
{cell.render("Cell")}
</td>
);
})}
</tr>
);
})}
</tbody>
</table>
<nav aria-label="Page navigation example">
<ul className="pagination justify-content-center">
<li className="page-item ">
<a
className="page-link"
tabIndex={-1}
aria-disabled="true"
onClick={() => gotoPage(0)}
disabled={!canPreviousPage}
>
{"<< First Page"}
</a>
</li>
<li className="page-item">
<a
className="page-link"
onClick={() => previousPage()}
disabled={!canPreviousPage}
>
{"<"}
</a>
</li>
<li className="page-item">
<a
className="page-link"
onClick={() => nextPage()}
disabled={!canNextPage}
>
{" >"}
</a>
</li>
<li className="page-item">
<a
className="page-link"
onClick={() => gotoPage(pageCount - 1)}
disabled={!canNextPage}
>
{"Last Page >>"}
</a>
</li>
</ul>
<ul className="pagination justify-content-right">
<div className="pagination">
<span>
<strong>
{pageIndex + 1} of {pageOptions.length}
</strong>{" "}
</span>
<span>
| Go to page:{" "}
<input
type="number"
defaultValue={pageIndex + 1}
onChange={(e) => {
const page = e.target.value ? Number(e.target.value) - 1 : 0;
gotoPage(page);
}}
style={{ width: "100px" }}
/>
</span>{" "}
<select
value={pageSize}
onChange={(e) => {
setPageSize(Number(e.target.value));
}}
>
{[10, 20, 30, 40, 50].map((pageSize) => (
<option key={pageSize} value={pageSize}>
Show {pageSize}
</option>
))}
</select>
</div>
</ul>
<p>Selected Rows: {Object.keys(selectedRowIds).length}</p>
</nav>
<pre>
{/* Display selected rows for debugging */}
{/* <code>
{JSON.stringify(
{
selectedRowIds: selectedRowIds,
"selectedFlatRows[].original": selectedFlatRows.map(
(d) => d.original
),
},
null,
2
)}
</code> */}
</pre>
</>
);
}
function setColumns(props) {
const { data } = props;
if (data !== undefined && data.length !== 0) {
const columnsKeys = Object.keys(data[0]);
return columnsKeys.map((column) => {
return {
Header: column,
accessor: column,
};
});
}
}
function SelectTable(props) {
const columns = props.columns ? props.columns : setColumns(props);
const { data, allowSelection, direct } = props;
const addSelection = props.allowSelection ? props.allowSelection : false;
if (columns && data.length)
return (
<>
<Table
columns={columns}
data={data}
allowSelection={addSelection}
direct={direct}
/>
<button className="btn-outline btn-sm">
<CSVLink data={data}>Export to CSV </CSVLink>
</button>
</>
);
else return null;
}
export default SelectTable;
解决方案
推荐阅读
- scala - 如何在Scala中引用类中的另一个对象时解决错误“外部引用阴影”?
- javascript - 当他输入一个已经在firebase中的号码时,如何提示用户“号码已被占用”
- reactjs - 如何在 react-hook-form v7 的渲染道具中使用 forwardRef
- jquery - 如何使用列表中的一个 ajax 调用返回列表填充两个下拉列表
- javascript - HTTP 请求在其他地方不起作用
- typescript - 如何在我的验证特定参数请求中使用猫鼬查找
- http - 不支持 Content-Type 标头 [text/plain]
- ios - 在 Swift 和 ios 14 中访问 Firebase Firestore 文档的字段?
- ios - 在 Swift 泛型中使用正确的类型约束变体
- python - 我可以使用 Keras NN 预测未来的价值吗?