add key support and pagination to TableView

[TheErondu]

Please i get this error when trying to load table with data from api... the table renders successfully but i get error on console :

act_devtools_backend.js:2655 Warning: Encountered two children with the same key, `9`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

see attached screen shot

here's my code:

import React, { useEffect, useState } from "react";
import { LoaderBusy, NavPageContainer, TableView } from "react-windows-ui";
import ApiEndpoints from "../../utils/api-endpoints";
import ApiService from "../../services/api-service";

const Users = () => {
 const [usersList, setUsersList] = useState([]);
 const [isLoading, setIsLoading] = useState(true);

 useEffect(() => {
   // Call the API service to get the message
   ApiService.apiCall({ endpoint: ApiEndpoints.getUsers, secured: true }).then((response) => {
     if (response.success) {
       setUsersList(response.data.data);
     }
     setIsLoading(false);
   });
 }, []);

 if (isLoading) {
   return <NavPageContainer hasPadding={true} animateTransition={true}>
     <div className="centered">
       <LoaderBusy isLoading={true} />
     </div>
   </NavPageContainer>
 }
 else {
   return (
     <NavPageContainer hasPadding={true} animateTransition={true}>
       <h1>Users</h1>
       <TableView
         columns={Object.keys(usersList[0]).map((key) => ({
           title: key,
           showSortIcon: true,
           sortable: true,
         }))}
         rows={usersList.map((user) => Object.values(user))}
       />
     </NavPageContainer>
   );
 }
};

export default Users;

[virtualvivek]

Hi @TheErondu,

Thanks for informing about this issue regarding the ListView.
This will be fixed in the next release with few more improvements :)