Integrating AdapTable in Your Application

Summary

This page will walk you through the steps of configuring and rendering AdapTable in your application.

Rendering AdapTable

Developer Guide

Detailed Guide to Rendering AdapTable

// use this named import
import { Adaptable } from '@adaptabletools/adaptable-infinite-react';

// import the CSS file if you're not handling CSS in a different way
import '@adaptabletools/adaptable-infinite-react/index.css';
1
Import Adaptable in your app

Use the Adaptable named import from the package.

Also make sure you import the CSS file that Adaptable ships with. (This is optional here, depending on how you handle your CSS.)

const data = [
  { make: 'Toyota', model: 'Yaris', price: 40000, identifier: 'y-1' },
  { make: 'Toyota', model: 'Corolla', price: 28000, identifier: 'c1' },
  { make: 'Ford', model: 'Mondeo', price: 32000, identifier: 'fordm' },
];
function App() {
  return (
    <Adaptable.Provider
      primaryKey="identifier"
      data={data}
      adaptableId="CarModelsDemo"
    ></Adaptable.Provider>
  );
}
2
Pass your `data`, `primaryKey` and `adaptableId` to Adaptable.Provider

In this step, you need to define your data. It can be:

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

The adaptableId should be unique for each separate instance of AdapTable in your application. The primaryKey is the name of the property that uniquely identifies each row in your data.

import { Adaptable, AdaptableColDef } from '@adaptabletools/adaptable-infinite-react';

const availableColumns: Record<string, AdaptableColDef> = {
  // the key of the column in this object
  // will be used as the column id
  make: {
    field: 'make',
    label: 'Make',
    dataType: 'text',
  },
  model: {
    field: 'model',
    label: 'Model',
    dataType: 'text',
  },
  price: {
    field: 'price',
    label: 'Price',
    dataType: 'number',
  },
  // here the column id is "id" and it's rendering the "identifier" field
  id: {
    field: 'identifier',
    label: 'ID',
    dataType: 'text',
  },
};
function App() {
  return (
    <Adaptable.Provider
      defaultState={{
        // declare the available columns here
        globalEntitites: { availableColumns },
      }}
      primaryKey="identifier"
      data={data}
      adaptableId="CarModelsDemo"
    ></Adaptable.Provider>
  );
}
3
Setup your state with the availableColumns

Adaptable state needs to know which columns are available in the table. Columns are an object where the key is the column id and the value is the column definition.

const view = {
  currentViewId: 'defaultView',
  views: [
    {
      id: 'defaultView',
      label: 'My Cars',
      columns: [
        {
          id: 'make',
        },
        {
          id: 'model',
        },
        {
          id: 'price',
        },
        {
          id: 'id',
        },
      ],
    },
  ],
};
function App() {
  return (
    <Adaptable.Provider
      defaultState={{
        view,
        globalEntitites: { availableColumns },
      }}
      primaryKey="identifier"
      data={data}
      adaptableId="CarModelsDemo"
    ></Adaptable.Provider>
  );
}
4
Configure your default view

You need to define a view for your data.

A view describes the columns which will be visible in the grid, their order, and a lot more.

For now, we'll define the most basic view, with some columns, a view label and a view id.

function App() {
  return (
    <Adaptable.Provider
      defaultState={{
        view,
        dashboard: {
          top: {
            widgets: [{ id: 'showViews', type: 'view' }],
          },
        },
        globalEntitites: { availableColumns },
      }}
      primaryKey="identifier"
      data={data}
      adaptableId="CarModelsDemo"
    >
      <h1>Hello World</h1>
      <Adaptable.UI /> {/* <---- make sure you render this */}
    </Adaptable.Provider>
  );
}
5
Render Adaptable.UI and configure a dashboard button

You're almost ready!

Render <Adaptable.UI /> inside your <Adaptable.Provider /> to see the result.

Of course, you can render any other stuff nested inside the <Adaptable.Provider />, but make sure you render <Adaptable.UI /> to see the table.

Adding a dashboard widget for views will make it easier to access the view you've just created.

Full Example

You're ready to go! Here's a full example of the code above, which puts everything together:

Putting it all together
Fork
PreviousInstallationNextManaging Data