HRNet

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

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

How to install

Download and import directly from NPM:

npm install hrnet-lib@latest

Insert import 'hrnet-lib/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.

Table

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 (not implemented yet).
  • 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.

Versions:

1.0.0:

• Added Select component.
• Added Table component.
• Added DatePicker component.

1.0.1:

• Minor modifications to components.

1.0.6:

• Minor modifications to components.
• Added Modal component.

1.0.7:

• Minor modifications to components.

1.0.10:

• Fixed issues.
• Minor modifications to components.
• Added README.md.