Datatable render problem | more than 102850 record

[MwSpaceLLC]

Hi there, (@dakahn @joshblack @janchild)

Today we have tried component datatable in react. We test 102850 record and we found one issue.

The component not have a virtual number for record. If the component render all record with totalItems={102850} we have a render dom break.

We must insert a virtual number like page. Component:

import React, {useState} from 'react';
import {
    DataTable,
    TableSelectRow,
    TableToolbar,
    TableContainer,
    TableBatchAction,
    TableBatchActions,
    TableToolbarContent,
    DataTableSkeleton,
    TableToolbarSearch,
    TableToolbarMenu,
    TableToolbarAction,
    TableSelectAll,
    TableExpandRow,
    TableExpandedRow,
    TableExpandHeader,
    Table,
    Button,
    TableHead,
    TableRow,
    TableHeader,
    TableBody,
    TableCell,
    Pagination
} from 'carbon-components-react';
import Trash20 from '@carbon/icons-react/es/trash-can/20';
import Edit20 from '@carbon/icons-react/es/edit/20';
import PropTypes from 'prop-types';

/**
 *
 * @param props
 * @returns {*}
 * @constructor
 */

function TableCases({tableTitle, tableDescription, tablePath, tableHeader}) {

    TableCases.propTypes = {
        tableTitle: PropTypes.string.isRequired,
        tableDescription: PropTypes.string.isRequired,
        tablePath: PropTypes.string.isRequired,
        tableHeader: PropTypes.array.isRequired,
    };

    const [loading, setLoading] = useState(true);
    const [title, setTitle] = useState(tableTitle);
    const [description, setDescription] = useState(tableDescription);

    const [headerData, setHeaderData] = useState(tableHeader);
    const [rowData, setRowData] = useState([]);

    const [paginate, setPaginate] = useState({
        current_page: null,
        first_page_url: null,
        from: null,
        last_page: null,
        last_page_url: null,
        next_page_url: null,
        path: null,
        per_page: null,
        prev_page_url: null,
        to: null,
        total: null,
    });

    function updateDataEvent(event) {
        let oldTitle = title;
        setTitle('Loading new data...')
        axios
            .get('/case/' + tablePath + '/get?page=' + event.page + '&pageSize=' + event.pageSize)
            .then(success => {
                setRowData(success.data.data);
                setTitle(oldTitle)
            })
            .catch(onerror => {
                setLoading(false);
                setTitle('Error data loading')
                console.log(onerror)
            })
    }

    function searchDataEvent(event) {
        let oldTitle = title;
        if (event.target.value) {
            setTitle('Search data...')
            axios
                .get('/case/' + tablePath + '/get?search=' + event.target.value)
                .then(success => {
                    setRowData(success.data.data);
                    setTitle(oldTitle)
                })
                .catch(onerror => {
                    setLoading(false);
                    setTitle('Error data search')
                    console.log(onerror)
                })
        } else getData();
    }

    function getData() {
        axios
            .get('/case/' + tablePath + '/get')
            .then(success => {
                setLoading(false);
                setRowData(success.data.data);

                setPaginate({
                    current_page: success.data.current_page,
                    first_page_url: success.data.first_page_url,
                    from: success.data.from,
                    last_page: success.data.last_page,
                    last_page_url: success.data.last_page_url,
                    next_page_url: success.data.next_page_url,
                    path: success.data.path,
                    per_page: success.data.per_page,
                    prev_page_url: success.data.prev_page_url,
                    to: success.data.to,
                    total: success.data.total,
                });
            })
            .catch(onerror => {
                setLoading(false);
                console.log(onerror)
            })
    }

    window.addEventListener('DOMContentLoaded', getData)

    /**
     * Return View */
    return (
        loading ?
            <DataTableSkeleton rowCount={10} showHeader={true} showToolbar={true} columnCount={headerData.length}/> :
            <DataTable isSortable
                       pagination
                       rows={rowData}
                       headers={headerData}
                       render={({
                                    rows,
                                    headers,
                                    getHeaderProps,
                                    getSelectionProps,
                                    getBatchActionProps,
                                    getRowProps
                                }) => (
                           <TableContainer
                               title={title}
                               description={description}>
                               <TableToolbar>
                                   <TableBatchActions {...getBatchActionProps()}>
                                       <TableBatchAction
                                           tabIndex={getBatchActionProps().shouldShowBatchActions ? 0 : -1}
                                           renderIcon={Trash20}
                                           onClick={() => console.log('clicked')}>
                                           Delete
                                       </TableBatchAction>
                                       <TableBatchAction
                                           tabIndex={getBatchActionProps().shouldShowBatchActions ? 0 : -1}
                                           renderIcon={Trash20}
                                           onClick={() => console.log('clicked')}>
                                           Download
                                       </TableBatchAction>
                                   </TableBatchActions>
                                   <TableToolbarContent>
                                       <TableToolbarSearch
                                           tabIndex={getBatchActionProps().shouldShowBatchActions ? -1 : 0}
                                           onChange={searchDataEvent}
                                       />
                                       <TableToolbarMenu
                                           tabIndex={getBatchActionProps().shouldShowBatchActions ? -1 : 0}>
                                           <TableToolbarAction primaryFocus onClick={() => alert('Alert 1')}>
                                               Go to settings
                                           </TableToolbarAction>
                                       </TableToolbarMenu>
                                       <Button
                                           tabIndex={getBatchActionProps().shouldShowBatchActions ? -1 : 0}
                                           onClick={() => window.location.href = '/case/create'}
                                           size="small"
                                           renderIcon={Edit20}
                                           kind="primary">
                                           Create Case
                                       </Button>
                                   </TableToolbarContent>
                               </TableToolbar>
                               <Table>
                                   <TableHead>
                                       <TableRow>
                                           <TableExpandHeader/>
                                           <TableSelectAll {...getSelectionProps()} />
                                           {headers.map(header => (
                                               <TableHeader {...getHeaderProps({header})}>
                                                   {header.header}
                                               </TableHeader>
                                           ))}
                                       </TableRow>
                                   </TableHead>
                                   <TableBody>
                                       {rows.map((row) => (
                                           <React.Fragment key={row.id}>
                                               <TableExpandRow {...getRowProps({row})}>
                                                   <TableSelectRow {...getSelectionProps({row})} />
                                                   {row.cells.map((cell) => (
                                                       <TableCell key={cell.id}>{cell.value}</TableCell>
                                                   ))}
                                               </TableExpandRow>
                                               <TableExpandedRow
                                                   colSpan={headers.length + 3}
                                                   className="demo-expanded-td">
                                                   <h6>Expandable row content</h6>
                                                   <div>Description here</div>
                                               </TableExpandedRow>
                                           </React.Fragment>
                                       ))}
                                   </TableBody>
                               </Table>
                               <Pagination
                                   backwardText="Previous page"
                                   disabled={false}
                                   forwardText="Next page"
                                   isLastPage={false}
                                   // itemRangeText={function noRefCheck() {
                                   // }}
                                   // itemText={function noRefCheck() {
                                   // }}
                                   itemsPerPageText="Items per page:"
                                   onChange={updateDataEvent}
                                   page={1}
                                   // pageInputDisabled
                                   pageNumberText="Page Number"
                                   pageRangeText={function noRefCheck() {
                                       return "ciao";
                                   }}
                                   pageSize={10}
                                   pageSizes={[
                                       10,
                                       20,
                                       30,
                                       40,
                                       50
                                   ]}
                                   // pageText={function noRefCheck() {
                                   //     return 150
                                   // }}
                                   pagesUnknown="ciao"
                                   // totalItems={paginate.total}
                               />
                           </TableContainer>)}
            />
    );
}

export default TableCases;

Request:

// 20200619125518
// http://helpdesk.mwspace.it/case/history/get

{
  "current_page": 1,
  "data": [
    {
      "id": "1",
      "category_id": 1,
      "user_id": 1,
      "user_role": "owner",
      "subject": "McLaughlin-Rutherford",
      "email": "lacey.koepp@breitenberg.info",
      "locale": "es_US",
      "status": "open",
      "created_at": "19/06/2020 10:07",
      "updated_at": "2020-06-19T10:07:27.000000Z",
      "deleted_at": null,
      "replies": [
        {
          "id": "1",
          "ticket_id": 1,
          "user_id": 1,
          "user_role": "owner",
          "content": "Mock Turtle's heavy sobs. Lastly, she pictured to herself in a hurry: a large crowd collected round it: there were three gardeners instantly jumped up, and there they are!' said the King. On this.",
          "email": "jkub@gmail.com",
          "created_at": "19/06/2020 10:07",
          "updated_at": "2020-06-19T10:07:27.000000Z",
          "deleted_at": null
        }
      ]
    },
    {
      "id": "2",
      "category_id": 2,
      "user_id": 1,
      "user_role": "owner",
      "subject": "Huels-McKenzie",
      "email": "vparker@jakubowski.com",
      "locale": "ii_CN",
      "status": "open",
      "created_at": "19/06/2020 10:07",
      "updated_at": "2020-06-19T10:07:27.000000Z",
      "deleted_at": null,
      "replies": [
        {
          "id": "2",
          "ticket_id": 2,
          "user_id": 1,
          "user_role": "owner",
          "content": "Alice. 'Well, then,' the Cat again, sitting on a crimson velvet cushion; and, last of all this time. 'I want a clean cup,' interrupted the Gryphon. 'Of course,' the Gryphon interrupted in a loud.",
          "email": "jacinto.wunsch@hotmail.com",
          "created_at": "19/06/2020 10:07",
          "updated_at": "2020-06-19T10:07:27.000000Z",
          "deleted_at": null
        }
      ]
    },
    {
      "id": "3",
      "category_id": 2,
      "user_id": 1,
      "user_role": "owner",
      "subject": "Simonis-Nienow",
      "email": "orpha18@yahoo.com",
      "locale": "zh_MO",
      "status": "open",
      "created_at": "19/06/2020 10:07",
      "updated_at": "2020-06-19T10:07:27.000000Z",
      "deleted_at": null,
      "replies": [
        {
          "id": "3",
          "ticket_id": 3,
          "user_id": 1,
          "user_role": "owner",
          "content": "Seven flung down his brush, and had just begun to think this a good deal until she made her so savage when they passed too close, and waving their forepaws to mark the time, while the rest of the.",
          "email": "grimes.katlyn@gmail.com",
          "created_at": "19/06/2020 10:07",
          "updated_at": "2020-06-19T10:07:27.000000Z",
          "deleted_at": null
        }
      ]
    },
    {
      "id": "4",
      "category_id": 1,
      "user_id": 1,
      "user_role": "owner",
      "subject": "Abernathy, Quitzon and Mitchell",
      "email": "pdooley@yahoo.com",
      "locale": "tr_TR",
      "status": "open",
      "created_at": "19/06/2020 10:07",
      "updated_at": "2020-06-19T10:07:27.000000Z",
      "deleted_at": null,
      "replies": [
        {
          "id": "4",
          "ticket_id": 4,
          "user_id": 1,
          "user_role": "owner",
          "content": "She got up and down in a mournful tone, 'he won't do a thing I ask! It's always six o'clock now.' A bright idea came into her face. 'Very,' said Alice: '--where's the Duchess?' 'Hush! Hush!' said.",
          "email": "jones.judd@monahan.info",
          "created_at": "19/06/2020 10:07",
          "updated_at": "2020-06-19T10:07:27.000000Z",
          "deleted_at": null
        }
      ]
    },
    {
      "id": "5",
      "category_id": 4,
      "user_id": 1,
      "user_role": "owner",
      "subject": "Langworth Inc",
      "email": "cmoen@rogahn.com",
      "locale": "mt_MT",
      "status": "open",
      "created_at": "19/06/2020 10:07",
      "updated_at": "2020-06-19T10:07:27.000000Z",
      "deleted_at": null,
      "replies": [
        {
          "id": "5",
          "ticket_id": 5,
          "user_id": 1,
          "user_role": "owner",
          "content": "Alice replied eagerly, for she was coming back to the King, and the soldiers remaining behind to execute the unfortunate gardeners, who ran to Alice to herself, 'to be going messages for a long.",
          "email": "vergie18@yahoo.com",
          "created_at": "19/06/2020 10:07",
          "updated_at": "2020-06-19T10:07:27.000000Z",
          "deleted_at": null
        }
      ]
    },
    {
      "id": "6",
      "category_id": 5,
      "user_id": 1,
      "user_role": "owner",
      "subject": "Bernhard Inc",
      "email": "beier.jermey@gmail.com",
      "locale": "ur_IN",
      "status": "open",
      "created_at": "19/06/2020 10:07",
      "updated_at": "2020-06-19T10:07:27.000000Z",
      "deleted_at": null,
      "replies": [
        {
          "id": "6",
          "ticket_id": 6,
          "user_id": 1,
          "user_role": "owner",
          "content": "I beg your pardon!' cried Alice hastily, afraid that she tipped over the list, feeling very glad to find her in such a pleasant temper, and thought it would feel with all her fancy, that: he hasn't.",
          "email": "moore.adrian@murazik.com",
          "created_at": "19/06/2020 10:07",
          "updated_at": "2020-06-19T10:07:27.000000Z",
          "deleted_at": null
        }
      ]
    },
    {
      "id": "7",
      "category_id": 3,
      "user_id": 1,
      "user_role": "owner",
      "subject": "Kuvalis PLC",
      "email": "valentin27@hoeger.com",
      "locale": "fil_PH",
      "status": "open",
      "created_at": "19/06/2020 10:07",
      "updated_at": "2020-06-19T10:07:27.000000Z",
      "deleted_at": null,
      "replies": [
        {
          "id": "7",
          "ticket_id": 7,
          "user_id": 1,
          "user_role": "owner",
          "content": "I can't understand it myself to begin with; and being so many different sizes in a voice she had not the smallest notice of her knowledge. 'Just think of nothing else to say to this: so she set to.",
          "email": "towne.coralie@gaylord.info",
          "created_at": "19/06/2020 10:07",
          "updated_at": "2020-06-19T10:07:27.000000Z",
          "deleted_at": null
        }
      ]
    },
    {
      "id": "8",
      "category_id": 5,
      "user_id": 1,
      "user_role": "owner",
      "subject": "Huel-Homenick",
      "email": "chance58@reilly.info",
      "locale": "ga_IE",
      "status": "open",
      "created_at": "19/06/2020 10:07",
      "updated_at": "2020-06-19T10:07:27.000000Z",
      "deleted_at": null,
      "replies": [
        {
          "id": "8",
          "ticket_id": 8,
          "user_id": 1,
          "user_role": "owner",
          "content": "And she tried hard to whistle to it; but she did not at all know whether it would be the best thing to nurse--and she's such a thing. After a minute or two, it was an old woman--but then--always to.",
          "email": "kunze.clovis@schaefer.com",
          "created_at": "19/06/2020 10:07",
          "updated_at": "2020-06-19T10:07:27.000000Z",
          "deleted_at": null
        }
      ]
    },
    {
      "id": "9",
      "category_id": 5,
      "user_id": 1,
      "user_role": "owner",
      "subject": "Upton-O'Reilly",
      "email": "paxton93@friesen.org",
      "locale": "en_NA",
      "status": "open",
      "created_at": "19/06/2020 10:07",
      "updated_at": "2020-06-19T10:07:27.000000Z",
      "deleted_at": null,
      "replies": [
        {
          "id": "9",
          "ticket_id": 9,
          "user_id": 1,
          "user_role": "owner",
          "content": "THAT like?' said Alice. The poor little thing was snorting like a Jack-in-the-box, and up the chimney, and said 'That's very curious!' she thought. 'I must be growing small again.' She got up and.",
          "email": "bleannon@gmail.com",
          "created_at": "19/06/2020 10:07",
          "updated_at": "2020-06-19T10:07:27.000000Z",
          "deleted_at": null
        }
      ]
    },
    {
      "id": "10",
      "category_id": 1,
      "user_id": 1,
      "user_role": "owner",
      "subject": "Gaylord Inc",
      "email": "renner.justus@hotmail.com",
      "locale": "ee_GH",
      "status": "open",
      "created_at": "19/06/2020 10:07",
      "updated_at": "2020-06-19T10:07:27.000000Z",
      "deleted_at": null,
      "replies": [
        {
          "id": "10",
          "ticket_id": 10,
          "user_id": 1,
          "user_role": "owner",
          "content": "Mock Turtle. So she called softly after it, 'Mouse dear! Do come back in their mouths--and they're all over with William the Conqueror.' (For, with all speed back to the game, feeling very glad to.",
          "email": "cleo25@gmail.com",
          "created_at": "19/06/2020 10:07",
          "updated_at": "2020-06-19T10:07:27.000000Z",
          "deleted_at": null
        }
      ]
    }
  ],
  "first_page_url": "http://helpdesk.mwspace.it/case/history/get?page=1",
  "from": 1,
  "last_page": 10285,
  "last_page_url": "http://helpdesk.mwspace.it/case/history/get?page=10285",
  "next_page_url": "http://helpdesk.mwspace.it/case/history/get?page=2",
  "path": "http://helpdesk.mwspace.it/case/history/get",
  "per_page": 10,
  "prev_page_url": null,
  "to": 10,
  "total": 102850
}

[dakahn]

Hey thanks for sumbitting. Two questions to help clarify the issue in my head real quick

• what's do you mean by virtual number?
• can you describe what a "render dom break" is exactly?