https://github.com/kenkyoo/app-table

Este es un proyecto simple que utiliza Tabulator para crear una tabla interactiva a partir de un archivo JSON.
https://github.com/kenkyoo/app-table

html javascript parcel table tabulator

Last synced: 4 months ago
JSON representation

Este es un proyecto simple que utiliza Tabulator para crear una tabla interactiva a partir de un archivo JSON.

• Host: GitHub
• URL: https://github.com/kenkyoo/app-table
• Owner: Kenkyoo
• Created: 2024-12-08T14:00:53.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-12-08T14:30:45.000Z (6 months ago)
• Last Synced: 2024-12-29T17:36:19.794Z (6 months ago)
• Topics: html, javascript, parcel, table, tabulator
• Language: JavaScript
• Homepage: https://app-table.pages.dev/
• Size: 26.4 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# App Table

Este es un proyecto simple que utiliza [Tabulator](http://tabulator.info/) para crear una tabla interactiva a partir de un archivo JSON.

## Demo

Puedes ver la aplicación en acción aquí: [App Table en Cloudflare](https://app-table.pages.dev/).

## Características

- Lee datos de un archivo JSON.

- Muestra una tabla interactiva con columnas configuradas.

- Incluye funciones de ordenamiento y formato para columnas específicas.

## Instalación

1. Clona este repositorio:

   ```bash

   git clone https://github.com/Kenkyoo/app-table.git

   cd app-table

    Instala las dependencias usando npm o yarn:

    npm install

Uso

Modo de desarrollo

Para iniciar un servidor de desarrollo:

npm start

Esto abrirá la aplicación en tu navegador en http://localhost:1234.

Construcción para producción

Para generar los archivos optimizados para producción:

npm run build

Los archivos se generarán en la carpeta dist/.

Estructura del Proyecto

    index.html: Archivo principal de la interfaz.

    data.json: Datos en formato JSON que se muestran en la tabla.

    style.css: Estilos personalizados.

    index.js: Lógica para inicializar Tabulator y cargar datos.

Dependencias

Este proyecto utiliza las siguientes dependencias:

    tabulator-tables: Para generar tablas interactivas.

    parcel: Para la construcción y empaquetado.

Código de Ejemplo

Configuración de Tabulator en index.js:

import { TabulatorFull as Tabulator } from 'tabulator-tables';

import tabledata from './data.json';

import './style.css';

var table = new Tabulator("#example-table", {

    data: tabledata,

    columns: [

        { title: "ID", field: "employee_id", sort: "number" },

        { title: "Name", field: "full_name", sort: "string" },

        { title: "Job Title", field: "job_title", sort: "string" },

        { title: "Department", field: "department", sort: "string" },

        { title: "Salary", field: "salary", sort: "number", formatter: "money", formatterParams: { precision: 2 } }

    ],

});

Licencia

Este proyecto está disponible bajo la licencia MIT.