Rendering Infinite Table in AdapTable

AdapTable for InfiniteTable gives you the possibility to control how Infinite Table is rendered. Only use this for advanced use-cases and make sure you know what you're doing.

For managing the InfiniteTable component, you need to specify a components prop on the Adaptable.Provider component.

Sample code - using custom InfiniteTable rendering

import { Adaptable, AdaptableProps } from '@adaptabletools/adaptable-infinite-react';
import { InfiniteTable, DataSource } from '@infinite-table/infinite-react';

const components: AdaptableProps<DATA_TYPE>['components'] = {
  InfiniteTable: (props) => {
    return <InfiniteTable {...props} {...yourExtraPropsHere} />;
  },
  DataSource: (props) => {
    return <DataSource {...props} />;
  },
};
const rowData: DATA_TYPE[] = [
  /* your array of data */
];
function App() {
  return <Adaptable.Provider {...otherProps} data={rowData} components={components} />;
}

Using custom InfiniteTable rendering

Fork Fork

This example shows how you can provide your custom component to render the InfiniteTable and DataSource components.

Of course, in your custom components you will still be using the InfiniteTable and DataSource exports from @infinite-table/infinite-react do do the rendering, but will use the opportunity to add your own custom logic and modify props as needed.

In the code below, we listen to onColumnOrderChange and onGroupByChange while also taking care to call the default functions provided by AdapTable.

const components: AdaptableProps<DATA_TYPE>['components'] = {
  InfiniteTable: (props) => {
    return (
      <InfiniteTable
        {...props}
        onColumnOrderChange={(columnOrder) => {
          console.log('columnOrder', columnOrder);
          // make sure to call the default function provided by AdapTable
          props.onColumnOrderChange?.(columnOrder);
        }}
      />
    );
  },
  DataSource: (props) => {
    return (
      <DataSource
        {...props}
        onGroupByChange={(groupBy) => {
          console.log('groupBy', groupBy);
          // make sure to call the default function provided by AdapTable
          props.onGroupByChange?.(groupBy);
        }}
      />
    );
  },
}

<Adaptable.Provider
  data={rowData}
  primaryKey="id"
  adaptableId={`custom-infinite-component`}
  licenseKey={process.env.NEXT_PUBLIC_ADAPTABLE_LICENSE_KEY}
  defaultState={state}
  components={components}
>
  <Adaptable.UI />
</Adaptable.Provider>

Open Sandbox

Note

In the above example, make sure your custom InfiniteTable/DataSource components not redefined on each render (best to declare those outside your React component code), as that would cause performance issues and make those components unmount/remount on every change.

Note

In your custom InfiniteTable/DataSource components, you can use the useAdaptableState hook to access the AdapTable instance and the useAdaptableApi hook to access the AdapTable API.

The props each component (InfiniTable and DataSource) is called with are the props Adaptable has computed for those components and are needed for the components to work properly.

So if you want to override those props, please do so very carefully. For example, if you want to listen to the onColumnOrderChange in InfiniteTable, make sure you pass a function that also calls the default function provided by AdapTable.

const components: AdaptableProps<DATA_TYPE>['components'] = {
  InfiniteTable: (props) => {
    return (
      <InfiniteTable
        {...props}
        onColumnOrderChange={(columnOrder) => {
          // do your stuff
          console.log('columnOrder', columnOrder);
          // but also call the default function provided by AdapTable
          props.onColumnOrderChange?.(columnOrder);
        }}
      />
    );
  },
};

PrevioususeRowSelection NextRendering Infinite Table in AdapTable