https://github.com/coston/instant-table

Instantly build a responsive table from your data
https://github.com/coston/instant-table

data data-table json react reactjs table zero-configuration

Last synced: about 21 hours ago
JSON representation

Instantly build a responsive table from your data

• Host: GitHub
• URL: https://github.com/coston/instant-table
• Owner: coston
• License: mit
• Created: 2018-11-13T22:03:25.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2025-01-14T11:14:24.000Z (10 days ago)
• Last Synced: 2025-01-14T12:25:58.332Z (10 days ago)
• Topics: data, data-table, json, react, reactjs, table, zero-configuration
• Language: JavaScript
• Homepage: https://instant-table.coston.io
• Size: 1.2 MB
• Stars: 4
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ⌗ instant-table

Input data, output a react responsive table ✨

[![npm package version](https://badge.fury.io/js/instant-table.svg)](https://www.npmjs.com/package/instant-table) 

[![npm downloads](https://img.shields.io/npm/dm/instant-table.svg)](https://www.npmjs.com/package/instant-table) 

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://prettier.io)

## Live Demo

[https://instant-table.coston.io](https://instant-table.coston.io)

## Features

- Instantly build a table from your array of objects

- Automatic headers

- Responsive conversion to HTML `
` key-value format at mobile breakpoint

- Great Accessibility

- Customizations


## Install

Install with npm:

```sh

npm i instant-table

```

## Usage

```jsx

```

## Options

| Prop            | Type      | Argument   | Default            | Description                             |

| --------------- | --------- | ---------- | ------------------ | --------------------------------------- |

| data            | `array`   | `required` | `null`             | array of objects                        |

| breakpoint      | `string`  | `optional` | `768px`            | Width at which the table becomes a list |

| headerOrder     | `array`   | `optional` | first object order | Choose columns to display with order    |

| rowHeaders      | `boolean` | `optional` | `false`            | convert first column to row headers     |

| caption         | `string`  | `optional` | `null`             | add a table caption                     |

| sortable        | `boolean` | `optional` | `true`             | set to false to disable sortability     |

| tableColor      | `string`  | `optional` | `black`            | set header background color             |

| headerTextColor | `string`  | `optional` | `white`            | set header text color                   |

## Contributing

Please help ship data faster! Submit any issues and/or make a pull request!