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 :)

[virtualvivek]

Hi @TheErondu,

This issue has been resolved now :)