Simple Table Component to Render Json Data From Local or Remote

react-simpletable

Simple table component to render json data from local or remote

SimpleTable comes with support to:

• Local data
• Remote data
• Themes

See live examples here.

All size of projects need powerfull and customizable components, but data driven software usually have many CRUDS to simple manage data in single tables, in this case, productivity comes to be a good partner, and a simple declarative component to list local or remote data is a must.

In this cases react-simpletable is a fast option to show users data and let them select wich they want to change/delete.

Install

npm i @hesenger/react-simpletable

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import Table from 'react-simpletable';
import 'react-simpletable/dist/index.css';

const App = () => {
  const [data, setData] = React.useState([]);
  const [current, setCurrent] = React.useState();

  if (!data.length)
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(resp => resp.json())
      .then(data => setData(data));

  return <>
    <Table data={data} onSelect={row => setCurrent(row)}>
      <Table.Col name="id" header="#" />
      <Table.Col name="username" header="Username" />
      <Table.Col name="name" header="Name" />
      <Table.Col name="email" header="E-mail" />
      <Table.Col header="Site" format={obj => <a href={'http://' + obj.website}>{obj.website}</a>} />
    </Table>
    <p>
      Current selection: {JSON.stringify(current)}
    </p>
  </>;
}

ReactDOM.render(<App />, document.getElementById('root'))

Download Details:

Author: hesenger

Demo: https://hesenger.com/react-simpletable/

Source Code: https://github.com/hesenger/react-simpletable

#react #reactjs #javascript