Ait_reusable_table_react NPM

AIT Reusable Table React

A fully-fledged Table module created for React apps. Provides table component, search field, paging mode and more!

Overview

Introduction

AIT Reusable Table React provide You to use components that adapted to AIT standards. Its fully customizeable, realabel, integrated with Tailwind CSS.

Demo

Installation

Install The Module

With NPM

npm add ait_reusable_table_react

With Yarn

yarn add ait_reusable_table_react

Install Tailwind CSS

This project uses Tailwind CSS for UI Framework. You can refer this link to install Tailwind CSS

System Requirements

Module	Version
Node.js	^18.19.1
React	^18.2.0
Tailwind CSS	^3.4.1
react-router-dom	^6.22.3

Components

Table

import { Table } from 'ait_reusable_table_react'

Parameter	Type	Description	Default Value	Required
children	ReactNode	Children Component	undefined	No
classNames	TableClassNames	Class name that apply to Table component	undefined	No
onUpdateParams	(params: TableContextValueParams) => void	Fired when TableCell with order props was clicked	undefined	No
params	x: string: any	value that apply to TableCell with order props	undefined	No

All common table props can be apply to this component

TableClassNames

Name	Type	Required
container	string	No
table	string	No

TableContextValueParams

Name	Type	Required
x: string	any	No

TableRow

import { TableRow } from 'ait_reusable_table_react'

All common tr props can be apply to this component

TableHead

import { TableHead } from 'ait_reusable_table_react'

All common thead props can be apply to this component

TableBody

import { TableBody } from 'ait_reusable_table_react'

All common tbody props can be apply to this component

TableCell

Table > TableHead > TableRow > TableCell

Parameter	Type	Description	Default Value	Required
children	ReactNode	Children Component	undefined	No
classNames	TableCellClassNames	Class name that apply to TableCell component	undefined	No
index	boolean	Set TableCell behavior as index	false	No
order	string	Can be used to provide sort-order function	undefined	No
orderPrefix	string	apply prefix to order value, useful if you want to apply multiple sort-order	undefined	No
action	boolean	Set TableCell behavior as action	false	No

Table > TableBody > TableRow > TableCell

Parameter	Type	Description	Default Value	Required
children	ReactNode	Children Component	undefined	No
classNames	TableCellClassNames	Class name that apply to TableCell component	undefined	No
index	number	Set TableCell index	undefined	No
value	any	Set TableCell children with validation. If validation is fail, placeholder will appear instead	undefined	No
validate	(value: T) => boolean	custom validation	undefined	No
placeholder	string	appear while return validate is false	-	No
renderValue	(value: T) => ReactNode	Render custom value. Useful if you want to mapping value of Array or Object	undefined	No
action	boolean	Set TableCell behavior as action	false	No

All common tbody props can be apply to this component

TableCellClassNames

Name	Type	Required
actionDivider	string	No
actionWrapper	string	No
cell	string	No
ascIcon	string	No
descIcon	string	No
icon	string	No

ActionButton

import { ActionButton } from 'ait_reusable_table_react'

Used for TableCell action

Parameter	Type	Description	Default Value	Required
variant	ReactNode	Set behavior of ActionButton	undefined	No
loading	boolean	Set loading state	undefined	No
to	string	route to destination page. make sure react-router-dom v6 was installed	undefined	No

All common button props can be apply to this component

Typography

import { Typography } from 'ait_reusable_table_react'

Parameter	Type	Description	Default Value	Required
children	ReactNode	Children Component	undefined	No
variant	'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6' \| 'body1' \| 'body2' \| 'subtitle1' \| 'subtitle2' \| 'caption'	Set behavior of Typography	body1	No
type	'light' \| 'normal' \| 'medium' \| 'semibold' \| 'bold'	Set type of Typography	normal	No

All common HTMLAttributes can be apply to this component

TextField

import { TextField } from 'ait_reusable_table_react'

Parameter	Type	Description	Default Value	Required
label	string	label that apply to TextField	undefined	No
classNames	TextFieldClassNames	Class name that apply to TableCell component	undefined	No
helperText	string	TextField helper text	undefined	No
startIcon	ComponentType<SVGProps>	prefix TextField icon	undefined	No
endIcon	ComponentType<SVGProps>	suffix TextField icon	undefined	No
onClickEndIcon	MouseEventHandler	Fired when end icon was clicked	undefined	No
prefix	string \| number	prefix TextField	undefined	No
suffix	string \| number	suffix TextField	undefined	No
sizing	'sm' \| 'md' \| 'lg'	size of TextField	'md'	No
error	boolean	Tell to TextField that style behavior must be danger style	undefined	No

All common input props can be apply to this component

TextFieldClassNames

Name	Type	Required
container	string	No
helperText	string	No
startIconWrapper	string	No
startIcon	string	No
endIconWrapper	string	No
endIcon	string	No
wrapper	string	No
input	string	No

Paging

import { Paging } from 'ait_reusable_table_react'

Parameter	Type	Description	Default Value	Required
onChangePage	(data: PagingParams) => void	Fired when paging was changed	undefined	Yes
page	number	Current page	1	No
limit	number	Total data to display per page	10	No
total	number	Total data	0	No
loading	boolean	Props to temporary disable paging while data on load	false	No

PagingParams

Name	Type	Required
page	number	Yes
limit	number	Yes

Search

import { InputSearch } from 'ait_reusable_table_react'

Parameter	Type	Description	Default Value	Required
onChangeText	(value: string) => void	Fired while value is changed	undefined	No
value	string	set controlled value for this component	undefined	No

All common input props can be apply to this component

Example

How to use it

Common Usage

import {
  useState
} from "react";

import {
  ActionButton,
  Content,
  ContentBody,
  ContentHeader,
  InputSearch,
  Paging,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableRow,
  ToggleDarkMode
} from "ait_reusable_table_react";
import {
  Wrapper
} from "../../components";

export function ExamplePage() {

  const [params, setParams] = useState({
    total: 1000,
    size: 10,
    page: 1
  });

  const updateParams = (value: typeof params) => {
    setParams((_) => ({ ..._, ...value }));
  };

  const renderTableItem = (_: any, index: number) => {
    return (
      <TableRow key={index}>
        <TableCell {...{ index }} />
        <TableCell>First Name</TableCell>
        <TableCell>Last Name</TableCell>
        <TableCell>Username</TableCell>
        <TableCell>Email</TableCell>
        <TableCell action={true}>
          <ActionButton variant="detail" />
          <ActionButton variant="edit" />
          <ActionButton variant="delete" />
        </TableCell>
      </TableRow>
    );
  };

  return (
    <Wrapper>
      <Content>
        <ContentHeader title="Table Example">
          <ToggleDarkMode />
        </ContentHeader>
        <ContentBody>
          <InputSearch />
          <Table onUpdateParams={(_: any) => updateParams(_)} {...{ params }}>
            <TableHead>
              <TableRow>
                <TableCell index={true} />
                <TableCell order="first_name">First Name</TableCell>
                <TableCell order="last_name">Last Name</TableCell>
                <TableCell order="username">Username</TableCell>
                <TableCell orderPrefix="example" order="email">Email</TableCell>
                <TableCell className="w-[160px]" action={true}></TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {Array.from({ length: params.size }, renderTableItem)}
            </TableBody>
          </Table>
          <Paging
            onChangePage={(_: any) => updateParams(_)}
            total={params.total}
            size={params.size}
            page={params.page}
          />
        </ContentBody>
      </Content>
    </Wrapper>
  );
}