https://github.com/zambezi/react-simple-table

A React wrapper for @zambezi/simple-table
https://github.com/zambezi/react-simple-table

Last synced: 12 days ago
JSON representation

A React wrapper for @zambezi/simple-table

• Host: GitHub
• URL: https://github.com/zambezi/react-simple-table
• Owner: zambezi
• License: mit
• Created: 2016-08-18T13:16:10.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2016-09-12T10:39:22.000Z (over 8 years ago)
• Last Synced: 2024-12-10T00:53:15.443Z (17 days ago)
• Language: JavaScript
• Size: 30.3 KB
• Stars: 1
• Watchers: 7
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
@zambezi/react-simple-table

===========================

A wrapper to use [@zambezi/simple-table](https://github.com/zambezi/simple-table) as a React component.

## Installation

```

npm install --save @zambezi/react-simple-table

```

## Basic Usage

Define your data as an Array of rows:

```

const rows = [

        {

          name: 'Álvaro'

        , email: '[email protected]'

        , address: { city: 'London' }

        , price: 234234.23433223

        }

      , {

          name: 'Ignacio'

        , email: '[email protected]'

        , address: { city: 'London' }

        , price: 111111.234234234

        }

      ]

```

Define your columns as an Array of column descriptors:

```

const columns = [

        { key: 'name', label: 'Name' }

      , { key: 'email', label: 'Email' }

      , { format: addressFormatter, label: 'City' }

      , { key: 'price', label: 'Price', format: priceFormatter }

      ]

```

- `label`: The label for this column in the table header

- `key`: The key in the row to pick the data from. Optional, see `format`

- `format`: a function that will take either a cell or a row as argument. If

  a `key` is provided `format` will receive a cell, otherwise it will receive

  the entire row.

Define any required formatter functions:

```

function addressFormatter(row) {

  return row.address.city

}

function priceFormatter(price) {

  return price.toFixed ? price.toFixed(3) : ''

}

```

Render the table using React and ReactDOM

```

import React from 'react'

import ReactDOM from 'react-dom'

import SimpleTable from '@zambezi/react-simple-table'

ReactDOM.render(

  

, document.querySelector('#react-simple-table')

)

```

## Handling selections

Provide a mechanism to render `SimpleTable` on demand, passing an array of

selected rows:

```

function draw(selected=[]) {

  ...

}

```

Define a selection callback:

```

function addToSelection(row) {

  // `selected` is an Array of rows

  draw([ row ])

}

```

Pass the selection callback and the selected rows as a properties

to `SimpleTable`:

```

function draw(selected=[]) {

  ReactDOM.render(

    

  , document.querySelector('#react-simple-table')

  )

}

```

## Contributing

See [contributing](CONTRIBUTING.md)