权限没有，则隐藏 function forum_list_access_filter($forumlist, $gid, $allow = 'allowread') { global $grouplist; if (empty($forumlist)) return array(); if (1 == $gid) return $forumlist; $forumlist_filter = $forumlist; $group = $grouplist[$gid]; foreach ($forumlist_filter as $fid => $forum) { if (empty($forum['accesson']) && empty($group[$allow]) || !empty($forum['accesson']) && empty($forum['accesslist'][$gid][$allow])) { unset($forumlist_filter[$fid]); } unset($forumlist_filter[$fid]['accesslist']); } return $forumlist_filter; } function forum_filter_moduid($moduids) { $moduids = trim($moduids); if (empty($moduids)) return ''; $arr = explode(',', $moduids); $r = array(); foreach ($arr as $_uid) { $_uid = intval($_uid); $_user = user_read($_uid); if (empty($_user)) continue; if ($_user['gid'] > 4) continue; $r[] = $_uid; } return implode(',', $r); } function forum_safe_info($forum) { //unset($forum['moduids']); return $forum; } function forum_filter($forumlist) { foreach ($forumlist as &$val) { unset($val['brief'], $val['announcement'], $val['seo_title'], $val['seo_keywords'], $val['create_date_fmt'], $val['icon_url'], $val['modlist']); } return $forumlist; } function forum_format_url($forum) { global $conf; if (0 == $forum['category']) { // 列表URL $url = url('list-' . $forum['fid'], '', FALSE); } elseif (1 == $forum['category']) { // 频道 $url = url('category-' . $forum['fid'], '', FALSE); } elseif (2 == $forum['category']) { // 单页 $url = url('read-' . trim($forum['brief']), '', FALSE); } if ($conf['url_rewrite_on'] > 1 && $forum['well_alias']) { if (0 == $forum['category'] || 1 == $forum['category']) { $url = url($forum['well_alias'], '', FALSE); } elseif (2 == $forum['category']) { // 单页 $url = ($forum['threads'] && $forum['brief']) ? url($forum['well_alias'] . '-' . trim($forum['brief']), '', FALSE) : url($forum['well_alias'], '', FALSE); } } return $url; } function well_forum_alias() { $forumlist = forum_list_cache(); if (empty($forumlist)) return ''; $key = 'forum-alias'; static $cache = array(); if (isset($cache[$key])) return $cache[$key]; $cache[$key] = array(); foreach ($forumlist as $val) { if ($val['well_alias']) $cache[$key][$val['fid']] = $val['well_alias']; } return array_flip($cache[$key]); } function well_forum_alias_cache() { global $conf; $key = 'forum-alias-cache'; static $cache = array(); // 用静态变量只能在当前 request 生命周期缓存，跨进程需要再加一层缓存：redis/memcached/xcache/apc if (isset($cache[$key])) return $cache[$key]; if ('mysql' == $conf['cache']['type']) { $arr = well_forum_alias(); } else { $arr = cache_get($key); if (NULL === $arr) { $arr = well_forum_alias(); !empty($arr) AND cache_set($key, $arr); } } $cache[$key] = empty($arr) ? '' : $arr; return $cache[$key]; } ?>javascript - ReactTable v7 - noDataText not showing on empty data (using useTableHook) - Stack Overflow

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>javascript - ReactTable v7 - noDataText not showing on empty data (using useTableHook) - Stack Overflow

    javascript - ReactTable v7 - noDataText not showing on empty data (using useTableHook) - Stack Overflow

    programmeradmin9浏览0评论

    I am trying to display some data using the react table v7. It works perfectly using the useTable hook, except it just displays an empty table, without a noDataText as expected.

    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', disableFilters: true},
        { 
            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} 
                />
            ),
            disableSortBy: true,
            disableFilters: true,
        },
    ], [])


    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}
        },
            useFilters,
            useSortBy,
            usePagination,
        )


    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

    Here is a visual of what the table looks like without data. How can I get reactTable (using usetable hook) to display a "no data" text when it's empty, and possibly a "loading" text when fetching data.

    I am trying to display some data using the react table v7. It works perfectly using the useTable hook, except it just displays an empty table, without a noDataText as expected.

    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', disableFilters: true},
        { 
            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} 
                />
            ),
            disableSortBy: true,
            disableFilters: true,
        },
    ], [])


    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}
        },
            useFilters,
            useSortBy,
            usePagination,
        )


    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

    Here is a visual of what the table looks like without data. How can I get reactTable (using usetable hook) to display a "no data" text when it's empty, and possibly a "loading" text when fetching data.

    • javascript
    • reactjs
    • react-table-v7
    Share Improve this question edited Sep 7, 2020 at 19:12 Gabriel asked Sep 7, 2020 at 11:29 GabrielGabriel 3725 silver badges11 bronze badges
    Add a ment  | 

    1 Answer 1

    Reset to default 6

    You are calling map on page for each row.

    So before that you could just check to see of page doesn't contain any rows, and return an appropriate message.

    Eg:

    {(
page.length > 0 && page.map( row => { ....... 

) || <span>no data....</span>}

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论