My first Library in NPM

Component Table based on Material UI.

It is an idea that came from many difficulties that arose in different implementations in different software

This board has only been tested using. React but can be used in different tools

Material Table Documentation

UI Material

npm i table-component-mui-lib

NPM Documentation

Video implementation

Reference Table

• dataSource Data visible in table
• columns Column visible in the table
• isCheckbox CheckBox is enabled for multiple selection in columns
• isRadioBox RadioBox is enabled to only select an element from the column
• selectedData Hooks Selected Data (this allows the data to be used in the main component)
• setSelectedData Hooks Data to select data
• isPaginate true - false to generate a pagination of the table
• search A textBox is enabled to search within the table
• isDowmload Allows you to enable button to download excel file
• _styleColumn Customizable style for the table columns
• childreButton Customizable buttons on the table

Data Type Columns

export interface HeadCell {
    disablePadding?: boolean;
    id?: keyof any;
    label?: string;
    numeric?: boolean;
    sort?: boolean;
    width?: number;
  }

Custom Column Creation

const column: HeadCell[] = [
  {
    id: 'id',
    numeric: false,
    disablePadding: false,
    label: 'ID',
    sort: true
  },
  {
    id: 'name',
    numeric: false,
    disablePadding: false,
    label: 'Name',
    sort: true
  },
  {
    id: 'username',
    numeric: false,
    disablePadding: false,
    label: 'User Name',
    sort: true
  },
  {
    id: 'email',
    numeric: false,
    disablePadding: false,
    label: 'Correo Eléctronico',
    sort: true
  },

]

Component Example

`
import { TableComponents, HeadCell } from 'table-component-mui-lib'

     <TableComponents
            dataSource={dataSource ?? []}
            dataSourceExcel={dataTableFields.data ?? []}
            columns={columns ?? []}
            isCheckbox={false}
            isRadioBox={false}
            selectedData={data seleccionada de las columnas}
            setSelectedData={hooks de selección de datos}
            isPaginate
            search
            isDowmload
            initialSelectionNumber={5}
            _styleColumn={{ backgroundColor: `#cdcd`, color: '#000' }}
            childreButton={(row: any) => (
              <Box sx={{ display: 'flex', gap: 1, alignContent: 'center' }}>
                <RadioGroup
                  aria-labelledby='demo-controlled-radio-buttons-group'
                  name='controlled-radio-buttons-group'
                >
                  <FormControlLabel
                    sx={{ ml: 1 }}
                    control={<Radio
                      color='success'
                      checked={boolean}
                      onClick={() => { }}
                             />}
                    onClick={(e: React.ChangeEvent<HTMLInputElement> | any) => {  }} // Guarda los datos de la fila seleccionada}
                    label=''
                  />
                </RadioGroup>
                <IconButton size='medium' sx={{ mr: 1 }}>
                  <Edit
                   >




          

            
        

The above is the detailed content of My first Library in NPM. For more information, please follow other related articles on the PHP Chinese website!