Tabl3 React Server Side

repo git
paquete npm
creado por [email protected]
Si quieres colaborar, escribeme un correo.
Tabla 100% server side creada en React
Agnostica a cualquier libreria que maneje el estado como Redux o Reflux,
Pensada para ser 100% compatible con Django Rest Framework pero no exclusiva, por tanto si el backend retorna un objeto JSON como el que requiere esta tabla, no existe problema para funcionar con otros lenguajes o framework
extensible con Plugins
Tabla sin dependencias, excepto los plugins creados que son de uso opcional

Compilar proyecto

yarn install

yarn dist

Inicialización

solo se debe declarar la propiedad config que contiene todo el objecto JSON con las configuraciones y opciones

render() {
  return (
    <Tabl3
      config={}
    />
  );
}

ademas para hacer referencia a la tabla y utilizar el metodo updateQueryStringOut que actualiza parametros de la tabla se puede utilizar ref={(e) => { this.table = e; }}

render() {
  return (
    <Table3
      ref={(e) => { this.table = e; }}
      config={}
    />
  );
}

El importante Conector AJAX

Simplemente es una funcion que se encarga de los llamados al api, centralizando todos los request en esta function

import axios from 'axios'

const conector = (opt, callback, errorCallback, nonErrorAjax, onAfterSend) => {
  axios(opt).then(
    response => {
    	/* estas 3 funcionas se suelen ejecutar a la vez */
      nonErrorAjax()
      callback(response.data, response, opt)
      onAfterSend(response)
    },
    response => errorCallback(response)
  )
}

export default conector

Parametros que entrega la funcion callback del `conector`

opt {object}: es el objeto declarado en config.ajax
calback {function}: se deben paras 3 parametros
- 1: la data de la respuesta (el siguiente apartado Servicio esplica bien lo que contiene data)
```
{
   "count": 13,
   "results": [
       {
           "id": 1,
           "name": "Blanco",
           "natural_key": "blanco"
       },
   ]
}
```
- 2: response: en el caso de axios contiene toda la metadata adicional, como las cabeceras, es status
- 3: opt: se retorna la configuración enviada al servicio, se puede manipular antes si hace falta, pero no se recomienda ya que podria afectar negativamente a la funcionalidad de la tabla.
errorCallback: una funcion que recibe como unico parametro la respuesta response cuando ha ocurrido un error
nonErorAjax: se ejecuta en caso de que no exista algun error con ajax se suele ejecutar en el caso de exito junto a callback
onAfterSend: pasa un objeto que retornara la funcion callback que puede ser escuhada desde fuera de la tabla, se suele pasar response como unico argumento

Servicio

request: al menos se debe enviar dos parametros http://127.0.0.1:8000/colors/?limit=4&offset=8
- limit: cantidad maxima de elementos retornador por el servicio en cada consulta
- offset: desde que registro se estan retornado los elementos
  - 0 para retornar desde el primer registros
  - 4 para retornar desde el 5to hacia lo definido en limit

response: es importante que el servicio consultado retorne el siguiente tipo de objecto data

{
    "count": 13,
    "results": [
        {
            "id": 1,
            "name": "Blanco",
            "natural_key": "blanco"
        },
        {
            "id": 2,
            "name": "Negro",
            "natural_key": "negro"
        },
        {
            "id": 3,
            "name": "Cafe",
            "natural_key": "cafe"
        },
        {
            "id": 4,
            "name": "Asabache",
            "natural_key": "asabache"
        }
    ]
}

count: cantidad total de elementos que existen el la tabla en la base de datos, o almenos lo que el query construido en el backend desea mostrar como maximo
results: array de elementos que va a mostrar en la table, y que son los que desea mapear en columns

Parametros de la tabla

table: {
  head: {
    actions: {
      title: 'titulo <th> acciones',
      className: '',
      style: {},
    }
  }
},
columns: [{
  th: {
    style: {},
  }
}]

El primer indice de parametros del objeto contiene las siguiente propiedades

ajax {object}: objecto donde se declara el servicio a consumir API
```
ajax: {
  url: 'api/colors/?query',
  method: 'GET',
  headers: {
    'Content-Type': 'application/json',
  },
  liveHeaders: () => ({}),
}
```
- url {string}: ruta inicial del servicio, si se hace reset de la tabla, este sera el servicio con el que se reinicializara la tabla, tambien se puede agregar un recurso con parametros host.com/api/v1/colors?limit=10&offset=0
- method {string}: metodo HTTP con el que se consume el servicio, ejemplo GET
- headers {objec} | opcional: objecto con los header que se desean enviar el la cabecera de los request, ejemplo 'Content-Type': 'application/json',
- liveHeaders {function} | return {object} | opcional: existen ocasiones en que se desea enviar un parametro en header calculado y no estatico, ejemplo:
```
() => ({
  Authorization: `JWT ${TOKEN()}`,
})
```
debug {object} | optional: set de keys para activar vistas en pantalla que muestra en vivo como elementos de la tabla en vivo
```
debug: {
  initiaAjax: false,
  inputSearch: true,
  paginator: true,
  dataset: false,
},
```
- initiaAjax {boolean} | optional: activa el feedback del objecto ajax de el head de la tabla
- inputSearch {boolean} | optional: activa el feedback de los elemetos input de el head de la tabla
- paginator {boolean} | optional: activa el feedback del objecto paginator de el footer de la tabla
- dataset {boolean} | optional: activa el feedback del objecto dataset que sera lo que retorna el servicio

onBeforeSend {function} | optional: función callback que tiene como unico parametro la configuración que se envia como request al servicio

/*
config: {
  url: 'api/colors/?query',
  method: 'GET',
  headers: {
    'Content-Type': 'application/json',
  },
}
*/
onBeforeSend: (config) => { console.log(config); },

onAfterSend {function} | optional: función callback que tiene como unico parametro la respuesta que retorna el servicio
```
onAfterSend: (response) => { console.log(response); },
```
table {object}: este objeto contiene los siguiente atributos
- clasName {string} | opcional : clases css pasadas directamente al tag <table>
- resetButton
columns {array}
paginator {object}
nuevo onAfterRender {function} | optional : se ejecuta cada vez que termina el render de los trs
nuevo extraThead {function} | optional : posibilita la opcion de agregar componentes en thead superior donde esta el botton reset

### el argumento component contiene otros atributos

1: el elemento en el row 2: los valores de la columna descritos en la definicion 3: el numero de columna (key) en ese momento

Implementación

import React from 'react';
import axios from 'axios';
import Tabl3 from '../../tabl3/tabl3';
import { InputSelectAsync } from '../../Table2New/plugins/index';

const baseUrl = 'http://127.0.0.1:8000';

const getData = (input, callback) => {
  const list = () => axios({
    url: `${baseUrl}/colors/?skip_pagination`,
    method: 'GET',
  }).then(e => e.data.map(i => ({ value: i.id, label: i.name })));
  list().then((e) => {
    callback(null, {
      options: e,
      complete: true,
    });
  });
};


export default () => (
  <div>
    <h1>About Us</h1>
    <p>Hello Medium!</p>
    <Tabl3
      ref={(e) => { this.table = e; }}
      config={{
        ajax: {
          url: `${baseUrl}/colors/`,
          method: 'GET',
          liveHeaders: () => ({}),
        },
        conector: conector,
        debug: {
          inputSearch: true,
          paginator: true,
          initiaAjax: false,
          dataset: true,
        },
        onBeforeSend: (e) => { console.log(e); },
        onAfterSend: (e) => { console.log(e); },
        table: {
          className: 'table table-hover table-sm',
          resetButton: {
            className: 'btn btn-danger',
            title: 'Reiniciar',
          },
          thead: {
            className: '',
            actions: {
              className: '',
              component: e => (<button onClick={() => {
                this.handlerAction(e.id);
              }}>{e.id}</button>),
            },
          },
        },
        paginator: {
          prevLink: 3,
          nextLink: 3,
        },
        columns: [
          {
            title: 'ID',
            name: 'id',
            textEmpty: 'Sin nombre',
            input: 'id',
            inputProps: {
              clearable: false,
            },
            getData,
            componentInput: InputSelectAsync,
          },
          {
            title: 'Nombre',
            name: 'name',
            textEmpty: 'Sin nombre',
            input: 'name__icontains',
            inputPlaceholder: 'Ingrese nombre a buscar',
            inputClassName: 'form-control',
          },
        ],
      }}
    />
  </div>
);

Implementación final

<div className="table-responsive table-2-responsive">
  <Table2New
    config={{
      ajax: {
        url: `${URL_LIST_BY_PMTDI_ID}${this.props.match.params.id}`,
        method: 'GET',
        liveHeaders: () => ({
          Authorization: `JWT ${getUserData().token}`,
        }),
      },
      conector,
      debug: {
        inputSearch: false,
        paginator: false,
        initiaAjax: false,
        dataset: false,
      },
      extraThead: paginator => (<button onClick={() => { console.log(paginator); }}>a</button>),
      onBeforeSend: () => '',
      onAfterSend: () => '',
      errors: {
        onAjaxError: () => '',
      },
      table: {
        className: 'table table-hover table-condensed',
        thead: {
          className: '',
          actions: {
            className: '',
            cssTH: {
              width: '100px',
              minWidth: '100px',
            },
            component: instance => (!this.state.is_published ? (
              <BtnEdit
                to={`/pmtdi/view/${instance.pmtdi}/${instance.id}`}
              />) : <BtnView
                to={`/pmtdi/view/${instance.pmtdi}/${instance.id}
                `}/>),
          },
        },
      },
      paginator: {
        prevLink: 3,
        nextLink: 3,
      },
      columns: [
        {
          title: _('type'),
          name: 'type.name',
          textEmpty: 'Sin Tipo',
          ordering: false,
        },
        {
          title: _('Start'),
          name: 'programmedworkdetail.start_dt',
          textEmpty: 'Sin Fecha',
          ordering: false,
          component: instance => (instance.details ? moment(instance.details.start_dt).format('DD-MM-YYYY H:mm:ss') : '--'),
          style: {
            minWidth: '200px',
            maxWidth: '200px',
          },
        },
        {
          title: _('End'),
          name: 'programmedworkdetail.end_dt',
          textEmpty: 'Sin Fecha',
          ordering: false,
          component: instance => (instance.details ? moment(instance.details.end_dt).format('DD-MM-YYYY H:mm:ss') : '--'),
          style: {
            minWidth: '200px',
            maxWidth: '200px',
          },
        },
        {
          title: _('Inspection'),
          name: 'programmedworkdetail.requires_inspection',
          textEmpty: 'Sin Estatus',
          ordering: false,
          component: instance => (
            instance.details ? (instance.details.requires_inspection ? 'Si' : 'No') : '--'),
        },
        {
          title: _('Status'),
          name: 'programmedworkdetail.status',
          ordering: false,
          textEmpty: 'Sin Estatus',
          component: instance => (instance.details ? resolveStatusProgrammedWork(instance.details.status) : '--'),
          style: {
            minWidth: '100px',
            maxWidth: '100px',
          },
        },
      ],
    }}
  />
</div>

Otra implementacion con atributos nuevos

import React from 'react';
import { Link } from 'react-router-dom';
import { _ } from 'i18n';

export default (
  self,
  getUserData,
  TableSelectAsync,
  API,
  AREAS_API,
  TableDateYYYYMM,
  PMTDI_REQUESTERS_API,
  PMTDI_TYPES_API,
  randomInt,
  TableSelect,
  conector,
) => ({
  ajax: {
    url: self.state.url,
    method: 'GET',
    liveHeaders: () => ({
      Authorization: `JWT ${getUserData().token}`,
    }),
  },
  paramsConection: {
    offset: 'offset',
    limit: 'limit',
    count: 'count',
    ordering: 'ordering',
  },
  conector,
  debug: {
    inputSearch: false,
    paginator: false,
    initiaAjax: false,
    dataset: false,
  },
  onBeforeSend: e => self.loadPMTDIList(e),
  onAfterSend: e => self.setPMTDIList(e),
  errors: {
    onAjaxError: self.callbackAjaxError,
  },
  table: {
    className: 'table table-hover table-condensed table-bordered',
    resetButton: {
      className: 'btn btn-sm btn-warning',
      title: 'Restablecer',
      onReset: self.callbackReset,
    },
    theadExtra: () => (<button
      className="btn btn-default hidden"
      onClick={
        () => {}}
    >test</button>),
    thead: {
      className: '',
      actions: {
        title: 'Acciones',
        className: 'claudio',
        style: {
          width: '130px',
          minWidth: '130px',
        },
      },
    },
  },
  columnsAction: {
    style: { color: 'red' },
    component: self.TableEditTemplate,
  },
  paginator: {
    className: 'pagination pagination-sm',
    style: {
      margin: '0px',
    },
    prevLink: 3,
    nextLink: 3,
    hidden: true,
  },
  columns: [
    {
      title: _('nemo'),
      name: 'natural_key',
      textEmpty: 'Sin nombre',
      cssTH: {
        width: '250px',
        minWidth: '250px',
      },
      component: instance => (
        <span>
          <Link to={`/pmtdi/view/${instance.id}`}>
            {instance.natural_key}
          </Link>
        </span>
      ),
      input: 'natural_key__icontains',
      inputClassName: 'form-control',
    },
    {
      title: _('Zone'),
      name: 'zone.name',
      ordering: 'zone',
      style: {
        minWidth: '220px',
        maxWidth: '220px',
      },
      component: instance => (
        <span>
          <div>
            {`${instance.id} `}
          </div> {instance.name}
        </span>
      ),
      /* required if selec input exist */
      componentInput: TableSelectAsync,
      input: 'zone',
      inputProps: {
        className: 'menu-outer-top',
        optionRenderer: e => (
          <span>
            <div>
              {`${instance.id} `}
            </div> {instance.category}
          </span>
        ),
      },
      getData: (input, callback) => {
        const list = () => apiEndpoint().then(e => e.data.map(i => ({
          ...i,
          label: i.name,
          value: i.id,
        })));
        list()
          .then(e => callback(null, { options: e, complete: true }))
          .catch(() => callback(null, { options: [], complete: true }));
      },
    },
    {
      title: _('Area'),
      name: 'area',
      ordering: 'area',
      cssTH: {
        width: '230px',
        minWidth: '230px',
      },
      /* required if selec input exist */
      componentInput: TableSelectAsync,
      input: 'area',
      getData: (input, callback) => {
        const areasList = () => apiEndpoint().then(
          e => e.data.map(i => ({
            ...i,
            label: i.name,
            value: i.id,
          })));
        areasList()
          .then(e => callback(null, { options: e, complete: true }))
          .catch(() => callback(null, { options: [], complete: true }));
      },
    },
    {
      title: _('period'),
      name: 'period',
      textEmpty: 'Sin Fecha',
      style: {
        minWidth: '120px',
        maxWidth: '120px',
      },
      componentInput: TableDateYYYYMM,
      input: 'period',
      component: instance => instance.status.slice(0, -3),
    },
    {
      title: 'Solicitante',
      name: 'requester.name',
      ordering: 'requester',
      cssTH: {
        width: '200px',
        minWidth: '200px',
      },
      /* required if selec input exist */
      componentInput: TableSelectAsync,
      input: 'requester',
      getData: (input, callback) => {
        const list = () => apiEndpoint().then(
          e => e.data.map(i => ({
            ...i,
            label: i.name,
            value: i.id,
          })));
        list()
          .then(e => callback(null, { options: e, complete: true }))
          .catch(() => callback(null, { options: [], complete: true }));
      },
    },
    {
      title: _('type'),
      name: 'type.name',
      ordering: 'type',
      cssTH: {
        width: '200px',
        minWidth: '200px',
      },
      /* required if selec input exist */
      componentInput: TableSelectAsync,
      input: 'type',
      getData: (input, callback) => {
        const list = () => apiEndpoint().then(
          e => e.data.map(i => ({
            ...i,
            label: i.name,
            value: i.id,
          })));
        list()
          .then(e => callback(null, { options: e, complete: true }))
          .catch(() => callback(null, { options: [], complete: true }));
      },
    },
    {
      title: _('detail'),
      name: 'detail',
      textEmpty: 'Sin deatlle',
      input: 'detail__icontains',
      component: e => (<div title={e.detail} style={{ width: '360px' }}className="ellipsis-text">{e.detail}</div>),
    },
    {
      title: 'Trabajos',
      name: 'total_work',
      ordering: false,
      cssTH: { textAlign: 'right' },
      style: {
        textAlign: 'right',
      },
    },
    {
      title: 'Aceptados',
      name: 'work_accepted',
      ordering: false,
      style: {
        textAlign: 'right',
      },
    },
    {
      title: 'Rechazados',
      name: 'work_rejected',
      ordering: false,
      style: {
        textAlign: 'right',
      },
    },
    {
      title: 'Infactibles',
      name: 'work_infeasible',
      ordering: false,
      style: {
        textAlign: 'right',
      },
    },
    {
      title: 'Pendientes',
      name: 'work_pending',
      ordering: false,
      style: {
        textAlign: 'right',
      },
    },
    {
      title: 'Publicado',
      name: 'is_published',
      cssTH: {
        width: '150px',
        minWidth: '150px',
      },
      input: 'is_published',
      inputProps: {
        noResultsText: 'No se encontro coincidencia',
      },
      componentInput: TableSelect,
      data: [{ label: 'SI', value: 'true' }, { label: 'NO', value: 'false' }],
      component: instance => (instance.isSuperUser ? 'SI' : 'NO'),
    },
  ],
});

Implementación 3

import React, { Component } from 'react';
// import PropTypes from 'prop-types';
import Tabl3 from 'tabl3';
import moment from 'moment';
import { getUserData } from '../../services/jwtSession';
import conector from '../../conector/ajax';
import { atUrl } from '../../services/at_api';
import { _ } from '../../services/CONST';

class AtTableList extends Component {
  render() {
    return (
      <div>
        <Tabl3
          config={{
            ajax: {
              url: atUrl,
              method: 'GET',
              liveHeaders: () => ({
                Authorization: `JWT ${getUserData().token}`,
              }),
            },
            paramsConection: {
              offset: 'offset',
              limit: 'limit',
              count: 'count',
              ordering: 'ordering',
            },
            conector,
            debug: {
              inputSearch: false,
              paginator: false,
              initiaAjax: false,
              dataset: false,
            },
            onBeforeSend: e => console.log(e),
            onAfterSend: e => console.log(e),
            errors: {
              onAjaxError: e => console.log(e),
            },
            table: {
              className: 'table-box-form table table-hover table-condensed table-bordered',
              theadExtra: () => (<tr>
                <td rowSpan="0" colSpan="5" />
                <td>{_('Installations')}</td>
              </tr>),
              thead: {
                className: '',
                actions: {
                  title: 'Acciones',
                  className: 'claudio',
                  style: {
                    width: '130px',
                    minWidth: '130px',
                  },
                },
              },
            },
            columnsAction: {
              component: i => <span>{i.id}</span>,
            },
            paginator: {
              className: 'pagination pagination-sm',
              style: {
                margin: '0px',
                height: '40px',
              },
              prevLink: 3,
              nextLink: 3,
              hidden: true,
            },
            columns: [
              {
                title: _('ID'),
                name: 'id',
                rowSpan: 1,
              },
              {
                title: _('naturalKey'),
                name: 'natural_key',
                rowSpan: 2,
                cssTH: { color: 'red' },
              },
              {
                title: _('name'),
                name: 'name',
              },
              {
                title: _('period'),
                name: 'programmed_work.created_at',
                component: i => (
                  <span>
                    {moment(i.programmed_work.details.start_dt).format('YYYY-MM-DD')} - {moment(i.programmed_work.details.end_dt).format('YYYY-MM-DD')}
                  </span>
                ),
              },
            ],
          }}
        />
      </div>
    );
  }
}

// AtTableList.propTypes = {
//   list: PropTypes.array.isRequired,
// };

export default AtTableList;

Boostrap 4 pagination

.pagination li {
    height: 36px;
    display: block;
    float: left;
    padding: 0;
    background: white;
    border-top: solid 1px #ddd;
    border-left: solid 1px #ddd;
    border-bottom: solid 1px #ddd;
}
.pagination li:first-child {
    border-radius: 5px 0px 0px 5px;
}

.pagination li:last-child {
    border-right: solid 1px #ddd;
    border-radius: 0px 5px 5px 0px;
}
.pagination li > * {
    display: block;
    float: left;
    padding: 5px 12px;
}
.pagination li > *:hover {
    text-decoration: none;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  z-index: 3;
  color: #fff;
  cursor: default;
  background-color: #0275d8;
  border-color: #ddd;
}

.table-2-new  .pagination li.active {
  background-color: #0275d8;
  color: white;
  border: 1px solid #0275d8 !important;
}

Name		Name	Last commit message	Last commit date
Latest commit History 93 Commits
config		config
dist		dist
dist_doc		dist_doc
src		src
.babelrc		.babelrc
.gitignore		.gitignore
.travis.yml		.travis.yml
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
LICENSE		LICENSE
README.md		README.md
_config.yml		_config.yml
package-lock.json		package-lock.json
package.json		package.json
package2.json		package2.json
webpack.config.js		webpack.config.js
yarn.lock		yarn.lock

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

Tabl3 React Server Side

Compilar proyecto

Inicialización

El importante Conector AJAX

Parametros que entrega la funcion callback del `conector`

Servicio

Parametros de la tabla

El primer indice de parametros del objeto contiene las siguiente propiedades

Implementación

Implementación final

Otra implementacion con atributos nuevos

Implementación 3

Boostrap 4 pagination

About

Releases

Packages

Languages

License

claudioDcv/Tabl3

Folders and files

Latest commit

History

Repository files navigation

Tabl3 React Server Side

Compilar proyecto

Inicialización

El importante Conector AJAX

Parametros que entrega la funcion callback del conector

Servicio

Parametros de la tabla

El primer indice de parametros del objeto contiene las siguiente propiedades

Implementación

Implementación final

Otra implementacion con atributos nuevos

Implementación 3

Boostrap 4 pagination

About

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

Packages 0

Languages

Parametros que entrega la funcion callback del `conector`

Packages