Skip to content

PT-Akar-Inti-Teknologi/ait_reusable_module_react

Repository files navigation

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.

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

Interface

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 be appear instead, prefer to use this props instead of children if your given children posibly undefined 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

Interface

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

Interface

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
Interface

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>
  );
}

Integrating with Query Params

See src/examples/modules/ExampleWithQueryParams

Integrating with Query Params and React Query

Make sure your Backend was following AIT standard.

See src/examples/modules/ExampleWithReactQuery

Developers

muhammad-f-huda-ait

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published