This is a fairly basic example of how to get started with AdapTable React.
AdapTable React is the React Framework version of AdapTable - the market-leading, low code AG Grid extension.
For full information on how to use AdapTable React see the AdapTable Documentation.
For an absolute barebones example see the Adaptable React Support Template
The demo is built using these key packages:
The main benefit of using AdapTable React is that it allows you to supply custom components in AdapTable in a React-friendly way.
For full information on how to install and use AdapTable React see the AdapTable Documentation.
This demo showcases 3 React-specific features of AdapTable:
The demo illustrates how to pass custom React components to the Settings Panel:
const adaptableOptions: AdaptableOptions = {
// ...
settingsPanelOptions: {
customSettingsPanels: [
{
// CUSTOM SETTINGS PANEL COMPONENT
frameworkComponent: CustomSettingsPanel,
name: 'Custom Settings',
}
]
}
// ...
}The demo illustrates how to pass custom React components to the Tool Panel:
const adaptableOptions: AdaptableOptions = {
// ...
toolPanelOptions: {
toolPanelOrder: ['adaptable', 'columns', 'filters'],
customToolPanels: [
{
// CUSTOM TOOLPANEL COMPONENT
// wraps a reusable React component (same component is used in a custom toolbar)
name: 'CustomQuickSearch',
title: 'Custom Quick Search',
frameworkComponent: ({ adaptableApi }) => {
return (
<QuickSearchCustomComponent
onSearchTextChange={(searchText: string) => {
adaptableApi.quickSearchApi.runQuickSearch(searchText);
}}
/>
);
},
}]
}
// ...
}The demo illustrates how to pass custom React components to the Dashboard Toolbar:
const adaptableOptions: AdaptableOptions = {
// ...
dashboardOptions: {
customToolbars: [
{
// CUSTOM TOOLBAR COMPONENT
// wraps a reusable React component (same component is used in a custom tool panel)
name: 'CustomQuickSearch',
title: 'Custom Quick Search',
frameworkComponent: ({ adaptableApi }) => {
return (
<QuickSearchCustomComponent
onSearchTextChange={(searchText: string) => {
adaptableApi.quickSearchApi.runQuickSearch(searchText);
}}
/>
);
},
},
],
}
// ...
}For more information on how to use React Components in AdapTable see the AdapTable Documentation.
Run npm install (or yarn), depending on what tool you're using.
Execute the following command
$ npm run startAn AdapTable Licence provides access to all product features as well as quarterly updates and enhancements through the lifetime of the licence, comprehensive support, and access to all 3rd party libraries.
We can make a trial licence available for a short period of time to allow you to try out AdapTable for yourself.
Please contact sales@adaptabletools.com or read the Licence Documentation for more information.
To see AdapTable React in action visit Adaptable Documentation which contains a large number of small demos each showing a different feature, function or option in AdapTable React (using dummy data sets).
Additionally, there is a page with larger 'recipe-type' Demos at the Adaptable Tools website.
Developers can learn how to access AdapTable React programmatically at AdapTable Documentation.
General information about Adaptable Tools is available at our Website
For all support enquiries please raise a Support Ticket.