3. Add main pane

Data hook

First we create a hook which stores the data we need to use within the main pane.

components/purchase-order-shipments/overview/usePurchaseOrderShipmentsListData.ts

import { useMemo } from 'react';import { useIntl } from 'react-intl';import { hooks } from '@springtree/eva-sdk-react-recoil';import { ITableColumn, ITableOptions } from '@springtree/eva-suite-ui';import { ITableProps } from '@springtree/eva-suite-ui/dist/components/table/TableTypes';import { useSetRecoilState } from 'recoil';import useSetResponseStale from 'util/hooks/useSetResponseStale';import {  purchaseOrderShipmentsLimit,  purchaseOrderShipmentsResult,  purchaseOrderShipmentsServiceState,  purchaseOrderShipmentsStart,  purchaseOrderShipmentsTotal,} from './purchase-order-shipments.state';
const usePurchaseOrderShipmentsListData = () => {  const intl = useIntl();  const results = hooks.useGetState(purchaseOrderShipmentsResult);  const total = hooks.useGetState(purchaseOrderShipmentsTotal);  const limit = hooks.useGetState(purchaseOrderShipmentsLimit);  const setLimit = useSetRecoilState(purchaseOrderShipmentsLimit);  const start = hooks.useGetState(purchaseOrderShipmentsStart);  const setStart = useSetRecoilState(purchaseOrderShipmentsStart);  const isLoading = hooks.useIsLoading({ state: purchaseOrderShipmentsResult });  const isLoadingWithoutResponse = useMemo(    () => isLoading && !results,    [isLoading, results]  );
  const columnConfig = useMemo<ITableColumn<any>[]>(    () => [      {        Header: intl.formatMessage({ id: 'column-header.id' }),        accessor: 'ID',      },      // Add all columns you need    ],    [intl]  );
  const tableOptions = useMemo<ITableOptions>(    () => ({      title: intl.formatMessage({        id: 'purchase-order-shipments.overview.title',      }),      // Add all table options you need    }),    [intl]  );
  const tableConfig = useMemo<ITableProps<any>>(    () => ({      data: results || [],      columns: columnConfig,      limit: limit ?? 25,      setLimit,      skip: start ?? 0,      setSkip: setStart,      isLoading: isLoadingWithoutResponse,      total: total ?? 0,      options: tableOptions,    }),    [      columnConfig,      isLoadingWithoutResponse,      limit,      results,      setLimit,      setStart,      start,      tableOptions,      total,    ]  );
  // Make sure a new request fires when you earlier visited the page and get back  //  useSetResponseStale(purchaseOrderShipmentsServiceState.stale);
  return {    isLoading,    tableConfig,  };};
export default usePurchaseOrderShipmentsListData;

Component

Now let's create the component we will use in the main pane

components/purchase-order-shipments/overview/PurchaseOrderShipmentsList.tsx

import {  Card,  ErrorBoundary,  ProgressBar,  RelativeBox,  Table,} from '@springtree/eva-suite-ui';import usePurchaseOrderShipmentsList from './usePurchaseOrderShipmentsListData';
const PurchaseOrderShipmentsList = () => {  const { tableConfig, isLoading } = usePurchaseOrderShipmentsList();
  return (    <Card>      <ErrorBoundary>        <RelativeBox>          <ProgressBar loading={isLoading} />          <Table {...tableConfig} />        </RelativeBox>      </ErrorBoundary>    </Card>  );};
export default PurchaseOrderShipmentsList;