Pagination

Description

pagination data is possible by passing the attributes top and skip in the initialDataState object

Structure

const initialDataState = {
  top: 5,
  skip: 0,
};

this example shows the first 5 records in the data

Example

Code

import CustomListView from "@components/custom-list-view/CustomListView";
const Demo = () => {
  const initialDataState = {
    top: 5,
    skip: 0,
  };

  const data = [
    { id: 1, club: "Arsenal", color: "red" },
    { id: 2, club: "Aston Villa", color: "purple" },
    { id: 3, club: "Bournemouth", color: "red" },
    { id: 4, club: "Brentford", color: "red" },
    { id: 5, club: "Brighton", color: "blue" },
    { id: 6, club: "Chelsea", color: "blue" },
    { id: 7, club: "Crystal Palace", color: "red" },
    { id: 8, club: "Everton", color: "blue" },
    { id: 9, club: "Fulham", color: "black" },
    { id: 10, club: "Ipswich", color: "blue" },
    { id: 11, club: "Leicester", color: "blue" },
    { id: 12, club: "Liverpool", color: "red" },
    { id: 13, club: "Man United", color: "red" },
    { id: 14, club: "Man City", color: "deepskyblue" },
    { id: 15, club: "Newcastle", color: "black" },
    { id: 16, club: "Nottingham", color: "red" },
    { id: 17, club: "Southampton", color: "red" },
    { id: 18, club: "Tottenham", color: "darkblue" },
    { id: 19, club: "West Ham", color: "purple" },
    { id: 20, club: "Wolves", color: "orange" },
  ];

  return (
    <CustomListView
      data={data}
      initialDataState={initialDataState}
      renderItem={(element) => (
        <div className="club-info" style={{ background: element.color }}>
          <p>
            {element.id} - <strong>{element.club}</strong>
          </p>
        </div>
      )}
    />
  );
};

Result

1 - Arsenal

2 - Aston Villa

3 - Bournemouth

4 - Brentford

5 - Brighton

1 - 5 of 20 items