Overview

This is a general overview of the AdaptableGrid and the core concepts you have to understand before using the grid.

Defining columns

Columns, along with the data source, are probably the most important concept for the grid.

/**

* Let's assume we want to display a list of employees,

* with their first and last names

*/

// we need to import the grid

import AdaptableGrid from '@adaptabletools/grid';

// and it's css

import '@adaptabletools/grid/index.css';

// we're ready to define columns

const columns = [

{ field: 'firstName' },

{ field: 'lastName' }

]

// and add some data

const data = [

{id: 1, firstName: 'John', lastName: 'Bobson' },

{id: 2, firstName: 'Mary', lastName: 'Richardson' },

]

<AdaptableGrid

columns={columns}

dataSource={data}

>

The columns prop needs to be an array of objects (which can contain many properties) - but the single most important property is the field, which tells which (obviously) field from the data source will be displayed in the given column.

---

Using a data-source

The dataSource property is another crucial part of the grid since it specifies what data is displayed inside the grid viewport.

There are a couple of ways in which the data source can be specified:

• an array
• a promise resolving to an array
• a function returning any of the above

For the most basic setup, use an array to get started

import AdaptableGrid from '@adaptabletools/grid';

import '@adaptabletools/grid/index.css';

const columns = [

{ field: 'firstName' },

{ field: 'lastName' }

]

// an array data-source, with properties matching the *field* specified in the columns

const data = [

{id: 'jbobson', firstName: 'John', lastName: 'Bobson' },

{id: 'mrichardson', firstName: 'Mary', lastName: 'Richardson' },

]

<AdaptableGrid

columns={columns}

dataSource={data}

primaryKey="id"

>

NOTE: In order to perform well, the AdaptableGrid needs a primaryKey (defaults to id) to be present on each item in the data-source (it doesn't necessarily need to have a corresponding column).

Lists

1. First ordered list item
2. Another item ⋅⋅* Unordered sub-list.
3. Actual numbers don't matter, just that it's a number ⋅⋅1. Ordered sub-list
4. And another item.

⋅⋅⋅You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown).

⋅⋅⋅To have a line break without a paragraph, you will need to use two trailing spaces.⋅⋅ ⋅⋅⋅Note that this line is separate, but within the same paragraph.⋅⋅ ⋅⋅⋅(This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)

• Unordered list can use asterisks

• Or minuses

• Or pluses

---

Links

I'm an inline-style link

I'm an inline-style link with title

I'm a reference-style link

I'm a relative reference to a repository file

You can use numbers for reference-style link definitions

Or leave it empty and use the link text itself.

URLs and URLs in angle brackets will automatically get turned into links. http://www.example.com or http://www.example.com and sometimes example.com (but not on Github, for example).

Some text to show that the reference links can follow later.

---

Images

Here's our logo (hover to see the title text):

Inline-style:

Reference-style:

---

Code

var s = 'JavaScript syntax highlighting';

alert(s);

s = "Python syntax highlighting"

print s

No language indicated, so no syntax highlighting.

But let's throw in a <b>tag</b>.

---

Tables

Colons can be used to align columns.

Tables	Are	Cool
col 3 is	right-aligned	\$1600
col 2 is	centered	\$12
zebra stripes	are neat	\$1

There must be at least 3 dashes separating each header cell. The outer pipes (|) are optional, and you don't need to make the raw Markdown line up prettily. You can also use inline Markdown.

Markdown	Less	Pretty
Still	renders	nicely
1	2	3

---

Blockquotes

Blockquotes are very handy in email to emulate reply text. This line is part of the same quote.

Quote break.

This is a very long line that will still be quoted properly when it wraps. Oh boy let's keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can put Markdown into a blockquote.

---

Inline HTML

Definition list

Is something people use sometimes.

Markdown in HTML

Does *not* work **very** well. Use HTML tags.

---

Line Breaks

Here's a line for us to start with.

This line is separated from the one above by two newlines, so it will be a separate paragraph.

This line is also a separate paragraph, but... This line is only separated by a single newline, so it's a separate line in the same paragraph.