https://github.com/dcoric/gl-table-data

Table display set of data with sorting by columns and pagination
https://github.com/dcoric/gl-table-data

bootstrap4 reactjs reactjs-es6 tableview

Last synced: 29 days ago
JSON representation

Table display set of data with sorting by columns and pagination

• Host: GitHub
• URL: https://github.com/dcoric/gl-table-data
• Owner: dcoric
• Created: 2018-06-17T23:49:22.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T05:53:16.000Z (over 2 years ago)
• Last Synced: 2025-03-05T14:18:38.223Z (about 2 months ago)
• Topics: bootstrap4, reactjs, reactjs-es6, tableview
• Language: JavaScript
• Homepage:
• Size: 3.27 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 22
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# gl-table-data

> 

[![NPM](https://img.shields.io/npm/v/gl-table-data.svg)](https://www.npmjs.com/package/gl-table-data) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash

npm install --save gl-table-data

```

## Usage

```jsx

import React, { Component } from 'react'

import TableData from 'gl-table-data';

export default class App extends Component {

  rowClickAction = (value) => {

    console.log('This is clicked row value', value);

  }

  render () {

    const data = [

      {id: 1, name: 'Test row 1', value: 11, date: new Date((new Date()).getTime() - 5000)},

      {id: 2, name: 'Test row 2', value: 31, date: new Date((new Date()).getTime() - 15000)},

      {id: 3, name: 'Test row 3', value: 17, date: new Date((new Date()).getTime() - 52000)},

      {id: 4, name: 'Test row 4', value: 35, date: new Date((new Date()).getTime() - 45000)},

      {id: 5, name: 'Test row 5', value: 22, date: new Date((new Date()).getTime() - 55000)},

      {id: 6, name: 'Test row 6', value: 8, date: new Date((new Date()).getTime() - 99000)},

      {id: 7, name: 'Test row 7', value: 6, date: new Date((new Date()).getTime() - 75000)},

      {id: 8, name: 'Test row 8', value: 44, date: new Date((new Date()).getTime() - 0)},

      {id: 9, name: 'Test row 9', value: 51, date: new Date((new Date()).getTime() - 4100)},

      {id: 10, name: 'Test row 10', value: 23, date: new Date((new Date()).getTime() - 15500)},

      {id: 11, name: 'Test row 11', value: 56, date: new Date((new Date()).getTime() - 22000)}

    ];

    return (

       this.rowClickAction(JSON.stringify(value))}

        tableItemsList={data}

        keyList={['id', 'name', 'value', 'date']}

        tableColumnData={

          {

            id: 'ID',

            id_width: 2,

            name: 'Name',

            name_width: 4,

            value: 'Amount $',

            value_width: 2,

            value_table_column_style: {fontWeight: 'bold'},

            date: 'Created at',

            date_width: 4,

            date_table_column_render_func: (date) => { return date.toLocaleString(); }

          }

        }

      />

    );

  }

}

```

## License

MIT © [dcoric](https://github.com/dcoric)