如何解决ReactTable v7-noDataText不显示在空数据上使用useTableHook
我正在尝试使用反应表v7 显示一些数据。它可以使用 useTable钩子完美地工作,除了它只显示一个空表,没有期望的 noDataText 。
import React,{ useContext,useEffect,useMemo } from 'react'
import {
useTable,useSortBy,useFilters,usePagination,} from 'react-table'
import '../css/datatable.css'
import WarehouseAction from './WarehouseAction'
import { WarehouseContext } from '../context/WarehouseContext'
import { AuthContext } from '../context/AuthContext'
import AddStock from './AddStock'
import { Filter,DefaultColumnFilter } from './Filter'
import { InlineIcon } from '@iconify/react'
import ChevronCircleUp from '@iconify/icons-jam/chevron-circle-up'
import ChevronCircleDown from '@iconify/icons-jam/chevron-circle-down'
function WarehouseData() {
const { warehouseData,getWarehouseRequest } = useContext(WarehouseContext)
const { profile } = useContext(AuthContext)
useEffect(() => {
getWarehouseRequest()
},[])
const data = useMemo(() => [...warehouseData],[warehouseData])
const columns = useMemo(() => [
{ Header: 'Stock',accessor: 'stock',disableSortBy: true,},{ Header: 'Description',accessor: 'description',disableSortBy: true},{ Header: 'Price',accessor: 'unit_price',disableFilters: true},{
Header: 'Total',accessor: 'units_total',Cell: ({cell}) => {
if (cell.row.values.units_total === 0){
return <p style={{ color: '#f00'}}>Out of Stock</p>
} else if (cell.row.values.units_total < 5){
return <p style={{ color: '#ffa600'}}>{cell.row.values.units_total}</p>
} else {
return <p style={{ color: '#090'}}>{cell.row.values.units_total}</p>
}
},disableFilters: true,{ Header: 'Updated',accessor: 'record_updated',{
Header: 'Action',accessor: 'id',Cell: ({cell}) => (
<WarehouseAction key={cell.row.values.id}
id={cell.row.values.id}
stock={cell.row.values.stock}
description={cell.row.values.description}
price={cell.row.values.unit_price}
total={cell.row.values.units_total}
updated={cell.row.values.record_updated}
/>
),],[])
const generateSortingIndicator = column => {
return column.isSorted ?
(column.isSortedDesc) ?
<InlineIcon className="inline-icon" icon={ChevronCircleDown} />
: <InlineIcon className="inline-icon" icon={ChevronCircleUp} />
: ""
}
const onChangeInSelect = event => {
setPageSize(Number(event.target.value))
}
const onChangeInInput = event => {
const page = event.target.value ? Number(event.target.value) -1 : 0
gotoPage(page)
}
const {
getTableProps,getTableBodyProps,headerGroups,// rows,page,prepareRow,canPrevIoUsPage,canNextPage,pageOptions,pageCount,gotoPage,nextPage,prevIoUsPage,setPageSize,state: { pageIndex,pageSize }
} = useTable(
{
columns,data,defaultColumn: { Filter: DefaultColumnFilter },initialState: { pageIndex: 0,pageSize: 5}
},)
return (
<React.Fragment>
<div className="table-top">
{ profile.is_admin && (<AddStock mode={"WAREHOUSE"}/> )}
</div>
<table {...getTableProps()}>
<thead>
{headerGroups.map(headerGroup => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map(column => (
<th {...column.getHeaderProps()}>
<div {...column.getHeaderProps(column.getSortByToggleProps())}>
{column.render('Header')}
{generateSortingIndicator(column)}
</div>
<Filter column={column} />
</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{page.map( row => {
prepareRow(row)
return(
<tr {...row.getRowProps()}>
{row.cells.map(cell => {
return (
<td {...cell.getCellProps()}>
{cell.render('Cell')}
</td>
)
})}
</tr>
)
})}
</tbody>
</table>
<ul id="pagination">
<li className="page-item" onClick={() => gotoPage(0)} disabled={!canPrevIoUsPage}>
First
</li>
<li className="page-item" onClick={() => prevIoUsPage()} disabled={!canPrevIoUsPage}>
{'<'}
</li>
<li className="page-count">
<strong>
{pageIndex + 1}
</strong>
</li>
<li className="page-item" onClick={() => nextPage()} disabled={!canNextPage}>
{'>'}
</li>
<li className="page-item" onClick={() => gotoPage(pageCount - 1)} disabled={!canNextPage}>
Last
</li>
<li className="page-input">
<input
type="number"
defaultValue={pageIndex + 1}
min={1}
max={pageOptions.length}
onChange={onChangeInInput}
/>
</li>
<select
value={pageSize}
className="page-select"
onChange={onChangeInSelect}>
<option key={pageSize} value={pageSize}>
Show {pageSize}
</option>
</select>
</ul>
</React.Fragment>
)
}
export default WarehouseData
这里是没有数据的情况下表格的外观。我如何获得reactTable(使用usetable钩子)在空时显示“无数据”文本,而在获取数据时可能显示“正在加载”文本。
解决方法
您正在为每个app/assets/images/
在TimeField NewTime HourOnly
102157 10:21:57 10 am
071740 07:17:40 7 am
000602 00:06:02 12 am
225058 22:50:58 10 pm
上呼叫map
。
因此,在此之前,您可以检查页面是否不包含任何行,并返回适当的消息。
例如:
page
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。