1.0.3 • Published 6 years ago

library-table-component v1.0.3

Weekly downloads
-
License
MIT
Repository
-
Last release
6 years ago

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} />
	)
}
PropValues
tableHeaderDataObject
tableContentDataObject
tableThemelight or dark
tableBordertrue or false
tableStripedtrue or false
tableHovertrue or false
1.0.3

6 years ago

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago