AdapTable React

AdapTable React Hooks

Summary

  • AdapTable provides 3 useful React hooks
  • These allow developers to access AdapTable State, Layouts and API from within their custom components

AdapTable React provides 3 React hooks, for developers to leverage in their React components.

Hint

These can be used anywhere inside the <Adaptable.Provider /> component

The 3 React hooks are:

  • useAdaptableState
  • useCurrentLayout
  • useAdaptableApi
Using the useAdaptableState and useCurrentLayout hooks
Fork
  • This example leverages AdapTable's react hooks
  • It shows how you can use the custom react hooks to access AdaptableState in a bespoke component outside of AdapTable (but inside the <Adaptable.Provider />)
  • We provide a custom component that leverages the useAdaptableState React hook to retrieve (and display) the 3 Layouts in the State, and the useCurrentLayout to set the Layout

useAdaptableState Hook

The useAdaptableState(selector?) hook will give you access to the whole of Adaptable State.

import { useAdaptableState } from '@adaptabletools/adaptable-react-aggrid';

Note

The hook will return null if AdapTable is not yet ready

Additionally, you can use the hook with a selector to select just part of AdapTable State:

// get Current Theme
const currentTheme = useAdaptableState(state => state.Theme.CurrentTheme);

// get Layout State
const layoutState = useAdaptableState(state => state.Layout);

useCurrentLayout Hook

Layouts (and particularly the Current Layout) are central to AdapTable and regularly accessed.

For this reason AdapTable offers the useCurrentLayout() hook which allows developers to access the Current Layout (and also have a setter function).

const [layout, setCurrentLayout] = useCurrentLayout();

The hook returns a tuple array:

  • the current Layout

  • a setter function that expects, as sole argument, the name of the Layout you want to apply

    Caution

    Ensure that the Layout is defined in your Adaptable State

The hook can be used like this:

function MyCmp() {
  const [currentLayout, setCurrentLayout] = useCurrentLayout();

  if (!currentLayout) {
    return null;
  }

  return (
    <div>
      Current layout {currentLayout.Name}
      <button
        onClick={() => {
          setCurrentLayout('MyPivotLayout');
        }}>
        Set pivot layout
      </button>
    </div>
  );
}

Note

When AdapTable is not ready, useCurrentLayout will return null.

useAdaptableApi hook

The useAdaptableApi hook returns a reference to the Adaptable API (or null if AdapTable is not yet ready).

PreviousReact No CodeNextReact Dev Guide