Package Exports

datatable-multiapps

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (datatable-multiapps) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

datatable-multiapps

Installation

npm install datatable-multiapps

yarn add datatable-multiapps

Usage

Using NPM

1 . Require datatable-multiapps after installation

import DataTable from 'datatable-multiapps';

Include datatable-multiapps component with the props

<DataTable
    title=''
    data={[]}
    headers={}
    pagination={}
    callback={}
    options={}
    color=""
/>

Example

import DataTable from 'datatable-multiapps';

export const ExamplePage = ():JSX.Element => {

    const newData: any = [
        {
            alterado_por: "sebastian enseña",
            fecha_creacion: "22/06/2021 - 09:09:38",
            idmaterial: "60d1ef22778d7100128ac6ad",
            nombre_archivo: "prueba",
            peso_archivo: "53.36 kb",
            ultima_edicion: "22/06/2021 - 09:09:38",
            url_archivo: "https://datatable-multiapps.example.com/example01"
        },
        {
            alterado_por: "sebastian no enseña",
            fecha_creacion: "22/06/2021 - 14:31:30",
            idmaterial: "60d23a92778d7100128ac9de",
            nombre_archivo: "prueba imagen 1",
            peso_archivo: "219.57 kb",
            ultima_edicion: "22/06/2021 - 14:31:30",
            url_archivo: "https://datatable-multiapps.example.com/example02"
        }
    ];

    const pag: any = {
        actualPage: 1,
        hasNextPage: false,
        hasPrevPage: false,
        itemCount: 2,
        success: true,
        total: 2,
        totalPages: 1
    };

    const detailMaterial = (obj: any) => {
        console.log('received object: ', obj)
    }

    const options:any = [
        {
            label: 'Ver Material',
            onClick: detailMaterial
        }
    ]

    const head:any = [
        {
            column_key: 'url_archivo',
            column_name: 'Archivo',
            column_type: 'text'
        },
        {
            column_key: 'fecha_creacion',
            column_name: 'Fecha de creación',
            column_type: 'text'
        },
        {
            column_key: 'nombre_archivo',
            column_name: 'Nombre del Archivo',
            column_type: 'text'
        },
        {
            column_key: 'alterado_por',
            column_name: 'Modificado por',
            column_type: 'text'
        },
        {
            column_key: 'peso_archivo',
            column_name: 'Peso del archivo',
            column_type: 'text'
        }
    ];

    const getMaterialData = (dt: any) => {
        const { query } = dt;
        console.log(query);
    }

    return (
        <>
            <DataTable
                title='Materiales'
                data={newData}
                headers={head}
                pagination={pag}
                callback={getMaterialData}
                options={options}
                color="red"
            />
        </>

    );
}

Options

Note:

The default color inside the DataTable component is dark.

Global	Status	Type
title	required	String
data	required	any[]
headers	required	any[]
pagination	required	Object
callback	required	Func
options	optional	any[]
color	optional	String

License

MIT