https://github.com/legitcode/table

the simplest, most hands-off table helper
https://github.com/legitcode/table

Last synced: 3 months ago
JSON representation

the simplest, most hands-off table helper

• Host: GitHub
• URL: https://github.com/legitcode/table
• Owner: Legitcode
• Created: 2015-09-04T21:57:14.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2015-10-07T20:21:29.000Z (over 10 years ago)
• Last Synced: 2025-01-31T22:41:34.211Z (12 months ago)
• Language: JavaScript
• Homepage: http://legitcode.github.io/table/
• Size: 1000 KB
• Stars: 31
• Watchers: 9
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
##Install

`npm install react-legit-table`

##Another Table Component....

I know what you're thinking... Yet another one of these things, right? I was using Facebook's Fixed Data Table until I realized how big of a library it is. All I needed was a simple html table. It's as simple as it can be, and works great with bootstrap:

###Importing and setup

~~~js

import Table from 'react-legit-table'

let rows = [

  {

    id: 1,

    name: 'Zach',

    job: 'coding'

  },

  {

    id: 2,

    name: 'Jed',

    job: 'Being a boss'

  }

]

~~~

###Rendering

~~~js

render(){

  return (

    

  )

}

~~~

The component expects simple, regular ol' javascript objects inside of an array.

###Options

`modify` accepts an object with keys equal to those in your rows object and the values are callbacks that will be called on rendering a row.

Optionally, use `modifyAll` to change every item.

**Example:**

~~~js

modifyId({hidden, value, key, row}){

  return {value}

}

render() {

  return (

    

  );

}

//optionally modifyAll rows:

~~~

`capitalize` Optionally, turn off capitalization of header row. True by default.

~~~js

~~~

##Requests?

I want to keep this simple and it has been perfect for my use case so far, but I'd love to hear suggestions.