Getting started

Getting started with Rowstack is easy. You only need column and data definitions to build a full-featured grid. When you need more control, an extensive set of options let you easily customize the grid.

#License

Rowstack is a commercial product. To use it in your application, you need to obtain a license key.

#Installation

Rowstack is distributed via npm. To install, run:

npm install rowstack

#Defining Data

data is an array of objects that will be turned into the rows of your table. Each object in the array represents a row of data and must at minimum contain an id that will be used to uniquely identify the row.

For example, if we have a grid that displays a list of users, data would look like this:

const data = [
	{
        id: 0,
		"name": "Uriel Russo",
		"email": "dolor.vitae@icloud.ca"
	},
	{
        id: 1,
		"name": "Priscilla Whitehead",
		"email": "egestas.aliquam@icloud.ca"
	},
	{
        id: 2,
		"name": "Mariam Christensen",
		"email": "lectus@google.com"
	},
	{
        id: 3,
		"name": "Elizabeth Hoffman",
		"email": "tellus.nunc@google.ca"
	},
	{
        id: 4,
		"name": "Zelda Hess",
		"email": "phasellus.libero.mauris@icloud.ca"
	}
]

#Defining Columns

columns is an array of objects that will decide how each column renders data. Each object in the array represents a column definition and must at minimum contain an id and a name.

For example, for a grid that displays a list of users, columns would look like this:

const columns = [
	{
        "id": "name",
		"name": "Name",
	},
	{
        "id": "email",
		"name": "Email",
	},
]

#Constructing the grid

With our columns and data defined, we can now create a grid:

import Table from "rowstack";
...

const licenseKey = "YOUR_LICENSE_KEY";

<Table data={data} columns={columns} licenseKey={licenseKey} />