AdapTable React
Custom Components

React Custom Popups

Summary

  • Developers using AdapTable React can create 2 types of Popups:
    • Custom Windows
    • Progress Indicators
  • Both are provided by leveraging ReactFrameworkComponent

Custom Window

Users of AdapTable React can provide React-specific instances of Custom Windows.

Developer Guide

Providing a Custom Window in AdapTable React

These are the steps required to display a Custom Window in AdapTable React

Find Out More

See the Developer Guide to displaying Custom Windows for full details on the objects used

export const CustomQuickSearch = ({
  adaptableApi,
}: {
  adaptableApi: AdaptableApi;
}) => {
  const [searchTerm, setSearchTerm] = useState('');
  useEffect(() => {
    adaptableApi.quickSearchApi.runQuickSearch(searchTerm);
  }, [searchTerm]);
  const onSearchChange = (event: any) => {
    const searchText = event.target?.value || '';
    setSearchTerm(searchText);
  };
  return (
    <div className="customQuickSearch">
      <text>Enter the text to Search on:</text>
      <input type="text" value={searchTerm} onChange={onSearchChange} />
      <button type="button" onClick={() => setSearchTerm('')}>
        Clear
      </button>
    </div>
  );
};
1
Create the React Component

This is a standard React Component of type ReactFrameworkComponent.

It can be as complicated and configurable as required.

Developers will typically provide a reference to the Adaptable API for use when controls in the Panel are accessed.

const config: CustomWindowConfig = {
  id: 'quick_search',
  title: 'Custom Quick Search',
  icon: 'search',
  position: {x: 100, y: 100},
  size: {width: 400, height: 300},
  frameworkComponent: ({adaptableApi}) => {
    return <CustomQuickSearch adaptableApi={adaptableApi} />;
  },
};
2
Create Custom Window Config

Create an instance of the CustomWindowConfig object.

Add id, title, icon, size and position props as required.

Reference React Component created in Step 1 as frameworkComponent property

adaptableApi.userInterfaceApi.openCustomWindowPopup(config);
3
Open Custom Window using User Interface API

Call openCustomWindowPopup function in UserInterfaceApi to display the Custom Window, passing in the Config created in the previous step

adaptableApi.userInterfaceApi.closeCustomWindowPopup('quick_search');
4
Optionally close Custom Window using User Interface API

Optionally close the Custom Window via the closeCustomWindowPopup function in UserInterfaceApi (passing in the id of the Window)

React Components as Custom Windows
Fork
  • In this demo we create a Custom Window that runs Quick Search using a bespoke React Framework Component
  • The Component is displayed by clicking the 'Run Custom Quick Search' Dashboard Button
  • Click on Show Code to see how we create and wire up the Custom Component

Progress Indicator

Users of AdapTable React can provide React-specific instances of Progress Indicators.

Developer Guide

Providing a Custom Progress Indicator in AdapTable React

export const ProgressIndicator = () => {
  return (
    <div className="progressIndicator">
      <p>Fetching your data</p>
      <p>Please be patient</p>
    </div>
  );
};
1
Create the React Component

This is a standard React Component of type ReactFrameworkComponent.

It can be as complicated and configurable as required.

const config: ProgressIndicatorConfig = {
  text: 'Custom Indicator',
  renderMode: 'content', // default value
  frameworkComponent: () => {
    return <ProgressIndicator />;
  },
};
2
Create the Progress Indicator

Create an instance of the ProgressIndicatorConfig object

Add text and renderMode props if required

Reference React Component created in Step 1 as frameworkComponent property

adaptableApi.userInterfaceApi.showProgressIndicator(config);
3
Open Progress Indicator using User Interface API

Call showProgressIndicator function in UserInterfaceApi to display the Progress Indicator, passing in the Config created in the previous step

adaptableApi.userInterfaceApi.hideProgressIndicator();
4
Close Progress Indicator using User Interface API

On completion of the long-running operation, hide the Progress Indicator using hideProgressIndicator function in UserInterfaceApi

React Components as Progress Indicators
Fork
  • In this demo we create a Progress Indicator using React Framework Component
  • It displays for 5 seconds and is then hidden
PreviousSettings PanelNextReact No Code