HRNet 2

A custom library for the HRNet educational project.

This library will not be updated after the project ends.

Content

This library contains four components:

• A custom select: Select
• A table with pagination and search filter: Table
• A datepicker with a select for month and year: DatePicker
• A modal with an optional header and footer: Modale

Each component's style can be modified by overriding the CSS classes.

How to install

Download and import directly from NPM:

npm install hrnet-lib2@latest

Insert import 'hrnet-lib2/dist/index.css' at the top of your app component.

Then, you can use EcmaScript imports to use components:

import {Select} from 'hrnetlib'

Component description

Select

The Select component has four props:

• (string) id: This is the id attribute, it is required.
• (string) label: The text to be displayed in the label tag.
• (array) options: An array of the desired options for the select tag.
• (string || null) defaultValue: null by default.
• (function) onChange: the callback function

DataTable

A responsive table with some options.

This component has four props:

• (array) headColumnList: A string array containing the table's header names.
• (array) bodyDataList: An array of objects containing the table's entries.
• (array) dataPropertiesList: A string array containing the properties from bodyDataList to be displayed.
• (array) options: An array for additional options:
  • boolean: If true, a search bar will be displayed.
  • boolean: If true, sorting will be enabled.
  • number: The default number of table entries to display.

DatePicker

A simple date picker with a select for month and year.

This component has two props:

• (string) id : This is the id attribute, it is required.
• (string) label : The text to be displayed in the label tag.
• (string) value : date value
• (function) onChange : the callback function
• (object) dateOptions : date format options ({year: 'numeric',month: 'long',day: '2-digit'} by default)
• (string) localDate : date format ('en-US' by default)

Versions:

1.0.0:

• Added Select component.
• Added DataTable component.
• Added DatePicker component.
• Added Modale component.

1.0.1 -> 1.0.7:

• Build changes for better compatibility.

1.0.8:

• Added readMe.md.
• Fix the design of the DataTable component.
• Fix the issue of the onChange function not reporting changes.
• Try to fix the issue about importing css from /dist when using the library.

1.0.9

• Fix the issue about importing css from /dist when using the library.

1.0.10

• Add options for the DatePicker component:
  • Choose your localesString value (ex : en-US, fr-FR)
  • Choose your options (ex : {year: 'numeric',month: 'long',day: '2-digit'})
• Fix the design of the DataTable component.
• Fix the design of the Select component.
• Fix the design of the DatePicker component.

1.0.11

• Fix the issue of the handlClickOutiside function on DatePicker.

1.0.12

• Fix the issue of the DataTable component for sorting.

1.0.13

• Fix the issue of the DataTable component for date sorting.