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.
- Create tables easily and quickly.
- Display data dynamically.
- Quickly integrate additional components such as a search bar or a sorting system.
Documentation at
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>
Installing with NPM is the recommended method for rapid integration and an optimal development experience.
npm install datatable-react-module
To start using this library, simply:
- Import library:
import { DataTable } from 'datatable-react-module'
- 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
}
- 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} />
- It is possible to add additional functionality with props
Table title.
<DataTable title="Title" />
To control the number of lines displayed in the table.
<DataTable entries={true} />
Allows you to search in the table.
<DataTable searchBar={true} />
To sort a column alphabetically or vice versa.
<DataTable sort={true} />
- 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>
Copyright (c) 2023-2024. Tox