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: "[email protected]"
			},
			{
				data: "@john"
			}
		]
	},
	{
		content: [
			{
				data: "Jane"
			},
			{
				data: "[email protected]"
			},
			{
				data: "@jane"
			}
		]
	},
	{
		content: [
			{
				data: "Jack"
			},
			{
				data: "[email protected]"
			},
			{
				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: "[email protected]"
				},
				{
					data: "@john"
				}
			]
		},
		{
			content: [
				{
					data: "Jane"
				},
				{
					data: "[email protected]"
				},
				{
					data: "@jane"
				}
			]
		},
		{
			content: [
				{
					data: "Jack"
				},
				{
					data: "[email protected]"
				},
				{
					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 |