DataTable - React

Introduction

Datatable is a library built with React, which allows you to easily create tables to use data. This library uses CSS Modules or SASS modules to add style.

The objective of this library is to simplify table creation for you. A task that can quickly become complicated when you want to integrate data dynamically.

1. Create tables easily and quickly.
2. Display data dynamically.
3. Quickly integrate additional components such as a search bar or a sorting system.

Documentation at

Exmaples:

import styles from './index.module.scss'

<DataTable<IEmployee>
  data={mockData.data}
  title="Current Employees"
  columnOrder={customColumnOrder}
  columnTitle={customColumnTitle}
  styleDataTable={styles.datatable}
  styleToolsBar={styles.toolsbar}
  styleTableContainer={styles.tableContainer}
  styleTable={styles.table}
  styleThead={styles.th}
  styleTbody={styles.td}
  styleTr={styles.tr}
  entries={true}
  styleEntries={styles.entries}
  styleEntriesFooter={styles.entriesFooter}
  stylePrevNext={styles.btnPrevNext}
  stylePage={styles.btnPage}
  sort={true}
  searchBar={true}
></DataTable>

Table of Contents

• Prerequisites
• Installation
• Documentation
• License

Prerequisites

1. NodeJS (version 20.9.0)
2. NPM
3. React.js

Installation

NPM

Installing with NPM is the recommended method for rapid integration and an optimal development experience.

npm install datatable-react-module

Module

To start using this library, simply:

1. Import library:

import { DataTable } from 'datatable-react-module'

2. Use the component:

[!IMPORTANT]
Just props data is required, it's a array with objects

<DataTable<IEmployee> data={dataEmployees.data}></DataTable>

[!NOTE]
Example of an object included in the table.

interface IEmployee {
  firstName?: string
  lastName?: string
  dateOfBirth?: string
  street?: string
  city?: string
  state?: string
  zipCode?: string
  startDate?: string
  department?: string
}

Documentation

Order Data

• It is possible to personalize the order of the columns according to the objects that are transmitted and also to personalize the name of the columns:

const customColumnOrder = [
  'firstName',
  'lastName',
  'startDate',
  'department',
  'dateOfBirth',
  'street',
  'city',
  'state',
  'zipCode',
]
const customColumnTitle = [
  'First Name',
  'Last Name',
  'Start Date',
  'Department',
  'Date of Birth',
  'Street',
  'City',
  'State',
  'Zip Code',
]

<DataTable columnOrder={customColumnOrder} columnTitle={customColumnTitle} />

Other features

• It is possible to add additional functionality with props

Title

Table title.

<DataTable title="Title" />

Entries

To control the number of lines displayed in the table.

<DataTable entries={true} />

SearchBar

Allows you to search in the table.

<DataTable searchBar={true} />

Sort

To sort a column alphabetically or vice versa.

<DataTable sort={true} />

Add style

• You must import your CSS or SASS module. It is also possible to insert the name of your class but it is advisable to use the first method, this will be the one used.

import styles from './index.module.scss'

<DataTable
  styleDataTable={styles.datatable}
  styleToolsBar={styles.toolsbar}
  styleTableContainer={styles.tableContainer}
  styleTable={styles.table}
  styleThead={styles.th}
  styleTbody={styles.td}
  styleTr={styles.tr}
  styleEntries={styles.entries}
  styleEntriesFooter={styles.entriesFooter}
  stylePrevNext={styles.btnPrevNext}
  stylePage={styles.btnPage}
/>

This is now how the transmitted classes are used:

    <div className={styleDataTable}>
      <h2>{title}</h2>

      <div className={styleToolsBar}>
        <label id="table-entries" className={styleEntries}></label>
        <label>
          <input type="search"/>
        </label>
      </div>

      <div className={styleTableContainer}>
        <table className={styleTable} id="main-table">

          <thead>
            <tr className={styleTr}>
              <th className={styleThead}></th>
            </tr>
          </thead>

          <tbody>
            <tr className={styleTr}>
              <td className={styleTbody}></td>
            </tr>
          </tbody>
        </table>
      </div>
      <div className={styleEntriesFooter}>
        <p><p>
        <div>
          <button className={stylePrevNext}>
            Previous
          </button>
          <button className={stylePage}>
            {page}
          </button>
          <button className={stylePrevNext}>
            Next
          </button>
        </div>
      </div>
    </div>

License

MIT

Copyright (c) 2023-2024. Tox