Skip to content

Instantly share code, notes, and snippets.

@matmunn

matmunn/App.tsx

Created May 9, 2020 03:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save matmunn/f5858d840a473c0917fc08b5cca3c9e0 to your computer and use it in GitHub Desktop.
Save matmunn/f5858d840a473c0917fc08b5cca3c9e0 to your computer and use it in GitHub Desktop.
Download ZIP
Table component
Raw
App.tsx
import React from 'react'
import Table from './Table'
const App: React.FC = () => {
return (
<div>
<Table
headings={{
name: 'NaMe',
age: 'Age',
}}
data={
[
{
"test": "Verdun",
"name": "Basia Robles",
"age": 49
},
{
"test": "White Rock",
"name": "Clio Pena",
"age": 29
},
{
"test": "Frankfurt",
"name": "Jessica Dawson",
"age": 77
},
{
"test": "Wemmel",
"name": "Keelie Bradley",
"age": 14
},
{
"test": "Katowice",
"name": "Shana Macdonald",
"age": 53
},
{
"test": "Dordrecht",
"name": "Kirby Dillard",
"age": 22
},
{
"test": "Noginsk",
"name": "Eleanor Terrell",
"age": 41
},
{
"test": "Forfar",
"name": "Danielle Wheeler",
"age": 27
},
{
"test": "Vichte",
"name": "Sybil Wheeler",
"age": 34
},
{
"test": "Temuka",
"name": "Phyllis Humphrey",
"age": 21
},
{
"test": "Ogbomosho",
"name": "Carissa Sheppard",
"age": 19
},
{
"test": "Khammam",
"name": "Jade Bright",
"age": 65
},
{
"test": "Cassano Spinola",
"name": "Chastity Lara",
"age": 15
},
{
"test": "Mellet",
"name": "Rowan Moreno",
"age": 66
},
{
"test": "Gojra",
"name": "Desirae Rocha",
"age": 8
},
{
"test": "Pettineo",
"name": "Isabelle Downs",
"age": 34
},
{
"test": "Zwevegem",
"name": "Iliana Atkins",
"age": 23
},
{
"test": "Spinoso",
"name": "Autumn Sloan",
"age": 52
},
{
"test": "Roccabruna",
"name": "Ava Perez",
"age": 64
},
{
"test": "Villafranca Tirrena",
"name": "Ivory Shields",
"age": 7
},
{
"test": "Pushkino",
"name": "Lydia Mejia",
"age": 35
},
{
"test": "Denver",
"name": "Roary Vazquez",
"age": 25
},
{
"test": "Stary Oskol",
"name": "Reagan Mathews",
"age": 73
},
{
"test": "Duffel",
"name": "Kirestin Chen",
"age": 72
},
{
"test": "East Kilbride",
"name": "Cora Mcleod",
"age": 18
},
{
"test": "Bothey",
"name": "Amela Frazier",
"age": 63
},
{
"test": "Villafranca in Lunigiana",
"name": "Jana Leach",
"age": 73
},
{
"test": "Huppaye",
"name": "Maite Mitchell",
"age": 57
},
{
"test": "Melazzo",
"name": "Signe Byrd",
"age": 23
},
{
"test": "Huaral",
"name": "Kendall Rivers",
"age": 37
},
{
"test": "Kakisa",
"name": "Maryam Sims",
"age": 17
},
{
"test": "Brunn am Gebirge",
"name": "Abra Harmon",
"age": 50
},
{
"test": "Sitapur",
"name": "Abra Cook",
"age": 60
},
{
"test": "Chiniot",
"name": "Erica Mcdowell",
"age": 75
},
{
"test": "Tortel",
"name": "Zelda Cunningham",
"age": 71
},
{
"test": "Mango",
"name": "Scarlet Downs",
"age": 61
},
{
"test": "Lauterach",
"name": "Aileen Griffith",
"age": 41
},
{
"test": "Busso",
"name": "Keely Jarvis",
"age": 71
},
{
"test": "Fossato Serralta",
"name": "Meghan Alvarado",
"age": 69
},
{
"test": "Alva",
"name": "Anjolie Hancock",
"age": 56
},
{
"test": "Dunbar",
"name": "Keely Hughes",
"age": 45
},
{
"test": "Seilles",
"name": "Wyoming Herrera",
"age": 53
},
{
"test": "Bengkulu",
"name": "Emerald Baldwin",
"age": 63
},
{
"test": "Estevan",
"name": "Alexis Lucas",
"age": 44
},
{
"test": "Konya",
"name": "Leandra Owens",
"age": 39
},
{
"test": "Marystown",
"name": "Scarlett Carson",
"age": 78
},
{
"test": "Kempten",
"name": "Natalie Leonard",
"age": 65
},
{
"test": "Helmsdale",
"name": "Cassady English",
"age": 31
},
{
"test": "Olathe",
"name": "Dahlia Drake",
"age": 80
},
{
"test": "Ashburton",
"name": "Quin Soto",
"age": 79
},
{
"test": "Alloa",
"name": "Dora Barrett",
"age": 74
},
{
"test": "Ville de Maniwaki",
"name": "Leandra Randolph",
"age": 70
},
{
"test": "Stavoren",
"name": "India Haley",
"age": 31
},
{
"test": "Tongue",
"name": "Rhonda Mueller",
"age": 8
},
{
"test": "Kasterlee",
"name": "Shelley Bird",
"age": 25
},
{
"test": "Coquitlam",
"name": "Velma Downs",
"age": 70
},
{
"test": "Herne",
"name": "Rylee Christian",
"age": 22
},
{
"test": "Bergen",
"name": "Cassady Valentine",
"age": 70
},
{
"test": "Maryborough",
"name": "Clare Harris",
"age": 42
},
{
"test": "Yangju",
"name": "Sonia Holden",
"age": 35
},
{
"test": "Morrovalle",
"name": "Colleen Holden",
"age": 35
},
{
"test": "Port Coquitlam",
"name": "Leilani Bonner",
"age": 53
},
{
"test": "Hattiesburg",
"name": "Sophia Diaz",
"age": 62
},
{
"test": "Kendal",
"name": "Winifred Pearson",
"age": 35
},
{
"test": "Carstairs",
"name": "Piper Berger",
"age": 55
},
{
"test": "Hull",
"name": "Adena Marshall",
"age": 48
},
{
"test": "Judenburg",
"name": "Donna Rodriquez",
"age": 21
},
{
"test": "Bangalore",
"name": "Kirsten Shepherd",
"age": 4
},
{
"test": "Georgia",
"name": "Jocelyn Bailey",
"age": 79
},
{
"test": "Abingdon",
"name": "Alice Velasquez",
"age": 71
},
{
"test": "Gojal Upper Hunza",
"name": "Sandra Joseph",
"age": 53
},
{
"test": "Sart-Dames-Avelines",
"name": "Whoopi Bird",
"age": 26
},
{
"test": "Picture Butte",
"name": "Shelly Patel",
"age": 24
},
{
"test": "Río Bueno",
"name": "Cecilia Briggs",
"age": 77
},
{
"test": "Macclesfield",
"name": "Mara Hubbard",
"age": 79
},
{
"test": "Aix-en-Provence",
"name": "Mikayla Torres",
"age": 59
},
{
"test": "Foz do Iguaçu",
"name": "Karina Franklin",
"age": 8
},
{
"test": "Kilsyth",
"name": "Belle Johns",
"age": 25
},
{
"test": "Saint John",
"name": "Rhona Rowland",
"age": 27
},
{
"test": "Forbach",
"name": "Athena Good",
"age": 61
},
{
"test": "Nonsan",
"name": "Abra Miller",
"age": 28
},
{
"test": "Padang Sidempuan",
"name": "Zena Kennedy",
"age": 52
},
{
"test": "Ponoka",
"name": "Kirby Mcgowan",
"age": 74
},
{
"test": "Maranello",
"name": "Elaine Chang",
"age": 43
},
{
"test": "Ch‰tillon",
"name": "Destiny Pennington",
"age": 42
},
{
"test": "Tame",
"name": "Katell Kirk",
"age": 8
},
{
"test": "Indianapolis",
"name": "Juliet Valenzuela",
"age": 12
},
{
"test": "Las Palmas",
"name": "Kelsey Mercado",
"age": 24
},
{
"test": "Neelum Valley",
"name": "Nola Copeland",
"age": 7
},
{
"test": "Gboko",
"name": "Joy Lara",
"age": 48
},
{
"test": "Kirkwall",
"name": "Jessica Wall",
"age": 77
},
{
"test": "Trazegnies",
"name": "Paloma Lloyd",
"age": 39
},
{
"test": "Precenicco",
"name": "Dawn Maddox",
"age": 23
},
{
"test": "Dampicourt",
"name": "Marcia Bates",
"age": 33
},
{
"test": "Altavilla Irpina",
"name": "Katelyn Burnett",
"age": 43
},
{
"test": "Merksem",
"name": "Stacy Drake",
"age": 16
},
{
"test": "Dublin",
"name": "Dawn Hall",
"age": 77
},
{
"test": "Berwick",
"name": "Aphrodite Rodriquez",
"age": 71
},
{
"test": "Heerhugowaard",
"name": "Ocean Shaffer",
"age": 24
},
{
"test": "Poznań",
"name": "Zelenia Vinson",
"age": 55
}
]
}
/>
</div>
)
}
export default App
Raw
Table.tsx
import React, { useState, useEffect } from 'react'
type StringsObject = {
[key: string]: string
}
type Props = {
data: Object[],
headings?: StringsObject
}
const Table: React.FC<Props> = ({ data, headings }) => {
const [headingKeys, setHeadingKeys] = useState<StringsObject>({})
useEffect(() => {
if (headings !== undefined) {
setHeadingKeys(headings)
} else {
if (data.length > 0) {
setHeadingKeys(
Object.keys(data[0]).reduce((object: StringsObject, key: string) => {
object[key] = key.toUpperCase()
return object
}, {})
)
}
}
}, [headings, data])
return (
<table>
{
headingKeys && (
<tr>
{
Object.values(headingKeys).map(value => (
<th>{ value }</th>
))
}
</tr>
)
}
{
data.length && data.map((line) => {
return (
<tr>
{
Object.keys(headingKeys).map(key => {
if (line.hasOwnProperty(key)) {
return (
<td>
{(line as any)[key]}
</td>
)
}
})
}
</tr>
)
})
}
</table>
)
}
export default Table
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment