Package Exports

wh-p14-full
wh-p14-full/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (wh-p14-full) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

WH-P14-Full

ATENTION ! THIS IS A SCHOOL PROJECT !

Search by keyword, Sort, Filter, Order, Pagination

Installation

The package can be installed via npm:

npm install wh-p14-full

Or via yarn:

yarn add wh-p14-full

You can import one or all following features :

import {
  NextPage,
  PreviousPage,
  Pagination,
  Order,
  Table,
  DropdownLimit,
  SearchByKey,
  PageStats,
} from "wh-p14-full";

Props description :

/** ALL PROPS **

- @param { Function } setMaxPageLimit: set max. pagination numbers
- @param { Function } setMinPageLimit: set min. pagination numbers
- @param { Function } setCurrentPage: set current page
- @param { Function } handleLimit: set page limit
- @param { Function } handleReset: reset pages states
- @param { Function } handleListAll: query database for all datas
- @param { Function } setSortBy: set sort display by title of data fields
- @param { Function } setOrder: set order by ASC or DESC
- @param { Function } TableData: customize Database data
- @param { Number } maxPageLimit: max pagination number
- @param { Number } minPageLimit: min pagination number
- @param { Number } limitPageNumbers: limit number of pages
- @param { Number } currentPage: current page number
- @param { Number } pages: result of how many pages will be listed
- @param { Number } totalResults: total number of data results from database
- @param { Number } resultsPerPage: results per page
- @param { Object } limit: limit number selection array
- @param { Object } settingsData: Database table for set up defaults : sortby, limit, pagination, pages
- @param { Object } dataResult: Database table for users
- @param { Object } sortingTitle: titles array for sorting buttons
- @param { String } order: return value : asc or desc
- @param { String } sortBy: return value from titles sorting array buttons
**/

{ Table }

Configuration Example

1 - Sorting Buttons Array

2 - Database fields(MYSQL,SQLite...)

1	USER ID	FIRST NAME	LAST NAME	BIRTHDATE	START DATE	DEPARTMENT	STREET	CITY	STATE	ZIP
2	id	firstname	lastname	createdAt	department	birthdate	street	city	state	zip

example :

create a filename : TableData.jsx and paste de following code :

export const TableData = ({ ...props }) => {
  return (
    <div className="data-container">
      <div className="data-title">{props.mainData.id}</div>
      <div className="data-title weight capitalize">
        {props.mainData.firstname}
      </div>
      <div className="data-title weight">{props.mainData.lastname}</div>
      <div className="data-title">{props.mainData.createdAt}</div>
      <div className="data-title">{props.mainData.department}</div>
      <div className="data-title">{props.mainData.birthdate}</div>
      <div className="data-title">{props.mainData.street}</div>
      <div className="data-title">{props.mainData.city}</div>
      <div className="data-title">{props.mainData.state}</div>
      <div className="data-title">{props.mainData.zip}</div>
    </div>
  );
};

create a filename : sortingTable.js and paste de following code :

const sortingTitle = [
  {
    title: "User ID",
    name: "id",
  },
  {
    title: "First Name",
    name: "firstname",
  },
  {
    title: "Last Name",
    name: "lastname",
  },
  {
    title: "Start Date",
    name: "createdAt",
  },
  {
    title: "Departement",
    name: "department",
  },
  {
    title: "Birthdate",
    name: "birthdate",
  },
  {
    title: "Street",
    name: "street",
  },
  {
    title: "City",
    name: "city",
  },
  {
    title: "State",
    name: "state",
  },
  {
    title: "Zip Code",
    name: "zip",
  },
];

Table {...props}

import { TableData } from "TableData.jsx";

<div className="data">
  <Table
    TableData={TableData}
    sortingTitle={sortingTitle}
    dataResult={dataResult}
    order={order}
    sortBy={sortBy}
    setSortBy={setSortBy}
    currentPage={currentPage}
    resultsPerPage={resultsPerPage}
  />
</div>;

{ NextPage, PreviousPage, Pagination, Order, PageStats }

Configuration Example

<div className="pagination">
  <Order
    setOrder="{setOrder}"
    order="{order}"
    handleListAll="{handleListAll}"
    handleLimit="{handleLimit}"
  />
  <PreviousPage
    setMaxPageLimit="{setMaxPageLimit}"
    setMinPageLimit="{setMinPageLimit}"
    maxPageLimit="{maxPageLimit}"
    minPageLimit="{minPageLimit}"
    limitPageNumbers="{limitPageNumbers}"
    currentPage="{currentPage}"
    setCurrentPage="{setCurrentPage}"
  />
  <div className="pages">
    <Pagination
      totalResults="{totalResults}"
      resultsPerPage="{resultsPerPage}"
      maxPageLimit="{maxPageLimit}"
      minPageLimit="{minPageLimit}"
      currentPage="{currentPage}"
      setCurrentPage="{setCurrentPage}"
      pages="{pages}"
    />
  </div>
  <NextPage
    setMaxPageLimit="{setMaxPageLimit}"
    setMinPageLimit="{setMinPageLimit}"
    maxPageLimit="{maxPageLimit}"
    minPageLimit="{minPageLimit}"
    limitPageNumbers="{limitPageNumbers}"
    currentPage="{currentPage}"
    setCurrentPage="{setCurrentPage}"
    pages="{pages}"
  />
</div>

{ DropdownLimit, SearchByKey }

Configuration Example

{handleFindKeyword} - value from input field

<div className="filter-container">
  <DropdownLimit
    limitData={limit}
    handleLimit={handleLimit}
    handleReset={handleReset}
    totalResults={totalResults}
    resultsPerPage={resultsPerPage}
    settingsData={settingsData}
  />
  <SearchByKey handleFindKeyword={handleFindKeyword} />
</div>

Browser Support

Compatible with the latest versions of Chrome and Firefox.

Credits

2023 - OCMStefan