Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save RyanRusnak/853680d68527a1172be7b7fa7eef2518 to your computer and use it in GitHub Desktop.
Save RyanRusnak/853680d68527a1172be7b7fa7eef2518 to your computer and use it in GitHub Desktop.
Google sheet to React table
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
componentDidMount(){
fetch('https://spreadsheets.google.com/feeds/list/YOUR_KEY/3/public/values?alt=json').then(
response => {
response.json().then(data => {
this.setState({rows: data.feed.entry})
});
}
);
}
constructor() {
super();
this.state = {
rows: []
}
}
render() {
let rows = this.state.rows.map((row, i) =>
<tr key={i}>
<td>{row.gsx$firstname.$t}</td>
<td>{row.gsx$lastname.$t}</td>
<td>{row.gsx$homeaddress.$t}</td>
<td>{row.gsx$workaddress.$t}</td>
<td>{row.gsx$distancefromwork.$t}</td>
</tr>
);
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<table className="MyClassName">
<thead>
<tr>
<td>First Name</td>
<td>Last Name</td>
</tr>
</thead>
<tbody>
{rows}
</tbody>
</table>
</div>
);
}
}
export default App;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment