React.js table component

This guide will help you render table components with React.js. If you're not familiar with setting up a new React web project, please refer to the React documentation.

Install

In order to install the components run the following:

npm install onedash-react-table

Storybook

The documentation and examples can be found here.

Usage

All the described components can be imported from "onedash-react-table".

Example:

import React, Component from "react";
import {Table, Column, Row, Cell} from "onedash-react-table";

class ComponentWithForm extends Component {
	render() {
		return (
			<Table {...args}>
				<Column name="name.first" label="Vorname" />
				<Column name="name.last" label="Nachname" />
				<Column name="age" label="Alter" />
				<Column name="address" label="Adresse" />
				{rows.map((row, i) => (
					<Row key={i} row={row}>
						<Cell name="name.first" />
						<Cell name="name.last" />
						<Cell name="age" />
						<Cell name="address" />
					</Row>
				))}
			</Table>
		)
	}
}

Styling

Most components come without any style. You can adjust it yourself by CSS. If you like the style in this documentation, you can use our stylesheet from here.