1.0.3 • Published 6 years ago
library-table-component v1.0.3
Table Component
Table component for React
Install and save component as a dependency
npm install --save library-table-component
Import component into your app
import Table from 'library-table-component'
Create an array of objects for the table headers and content with the keys being data and content
const tableHeaderData = [
{
data: "Name"
},
{
data: "Email"
},
{
data: "Username"
}
]
const tableContentData = [
{
content: [
{
data: "John"
},
{
data: "john@doe.com"
},
{
data: "@john"
}
]
},
{
content: [
{
data: "Jane"
},
{
data: "jane@doe.com"
},
{
data: "@jane"
}
]
},
{
content: [
{
data: "Jack"
},
{
data: "jack@doe.com"
},
{
data: "@jack"
}
]
}
]
Render the component with the object arrays we created as well as any other props that are needed
render () {
const tableHeaderData = [
{
data: "Name"
},
{
data: "Email"
},
{
data: "Username"
}
]
const tableContentData = [
{
content: [
{
data: "John"
},
{
data: "john@doe.com"
},
{
data: "@john"
}
]
},
{
content: [
{
data: "Jane"
},
{
data: "jane@doe.com"
},
{
data: "@jane"
}
]
},
{
content: [
{
data: "Jack"
},
{
data: "jack@doe.com"
},
{
data: "@jack"
}
]
}
]
return (
<TableComponent
tableHeaderData={tableHeaderData}
tableContentData={tableContentData}
tableTheme="light"
tableBorder={false}
tableStriped={true}
tableHover={false} />
)
}
Prop | Values |
---|---|
tableHeaderData | Object |
tableContentData | Object |
tableTheme | light or dark |
tableBorder | true or false |
tableStriped | true or false |
tableHover | true or false |