DEV Community

Cover image for Mi primera Libreria en NPM
Yosmar Hinestroza
Yosmar Hinestroza

Posted on

1

Mi primera Libreria en NPM

Tabla Componente basada de Material UI.

Es una idea que salió de muchas dificultades que se presentaron en diferentes implementaciones en diferente software

Esta tabla solo ha sido probada usando. React pero puede ser usada en diferentes herramientas

Documentación de Material Table

Material UI

npm i table-component-mui-lib

Enter fullscreen mode Exit fullscreen mode

Documentación NPM

Video implementación

Video demo instalación librería

Tabla Referencia

  • dataSource Datos visibles en la tabla
  • columns Columna visible en la tabla
  • isCheckbox Se habilita CheckBox para multiple selección en columnas
  • isRadioBox Se habilita RadioBox para solo seleccionar un elemento de la columna
  • selectedData Hooks Data Seleccionada (esto permite usar la data en el componente principal)
  • setSelectedData Hooks Data para seleccionar data
  • isPaginate true - false para generar una paginación de la tabla
  • search Se habilita un textBox para buscar dentro de la tabla
  • isDowmload Permite habilitar button para descargar archivo excel
  • _styleColumn Estilo personalizable a las columnas de la tabla
  • childreButton Botones personalizable en la tabla

Tipo de Datos Columnas

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

Creación de Columna personalizadas

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
  },

]
Enter fullscreen mode Exit fullscreen mode

Ejemplo Componente

`
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
                    style={{ color: #000 }} onClick={() => { }}
                  />
                </IconButton>

              </Box>
            )}
          />
`
Enter fullscreen mode Exit fullscreen mode

Sentry blog image

Identify what makes your TTFB high so you can fix it

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay