AppTable actions

Every table has a set of actions called stickyActions as they are stick on the right hand of the screen near to the table.

Filter

The default one is the filter action, it's a drawer that handles the table :

• Hide / show columns
• Fixe a columns
• Organize display order of columns

This drawer is automatically generated when you use AppTable component by default. You can remove it by setting filter property to false.

Export

You can also export all data of a table, it's set to false by default. To activate this button you need to pass an object to the stickyActions property in AppTable component.

ArticlesList.tsx - Sticky actions

const stickyActions = {
  export: {
    active: true,
    function: () => exportArticles(),
  },
};

You need to pass down an export object with active property to true and a function that will be triggered on click.

ArticlesList.tsx - Handle export

const {
  mutate,
  isLoading: exportLoading,
  data: exportData,
} = useExportArticlesMutation<Error>(graphqlRequestClient, {
  onSuccess: (
    data: ExportArticlesMutation,
    _variables: ExportArticlesMutationVariables,
    _context: unknown
  ) => {
    showSuccess(t("messages:success-exported"));
  },
  onError: (error) => {
    showError(t("messages:error-exporting-data"));
  },
});

const exportArticles = () => {
  mutate({
    format: ExportFormat.Csv,
    compression: null,
    separator: ",",
    orderBy: sort,
    filters: searchCriteria,
  });
};

We create the ExportAticles mutation and call the mutate function in order to make the request.

For a better user experience we will show messages on loading and display a loading spinner instead of the table.

ArticlesList.tsx - Handle export

useEffect(() => {
  if (exportLoading) {
    showInfo(t("messages:info-export-wip"));
  }
}, [exportLoading]);

return (
  <>
    {articles && !exportLoading ? (
      <AppTable
        type="articles"
        columns={columns}
        data={articles!.results}
        pagination={pagination}
        isLoading={isLoading}
        setPagination={onChangePagination}
        stickyActions={stickyActions}
        onChange={handleTableChange}
      />
    ) : (
      <ContentSpin />
    )}
  </>
);

Add other actions

To add other actions you need to follow the same step as before and change the AppTable component. For this example we will add a delete button.

First change the interface props.

AppTable.tsx - Props

export interface IAppTableProps {
  stickyActions?: {
    export?: any;
    delete?: any;
  };
}

Change the default value for the interface props

AppTable.tsx - Default value

AppTable.defaultProps = {
    scroll: { x: '100%' }
    filter: true,
    stickyActions: {
        export: {
            active: false,
        },
        delete: {
            active: false,
        },
    },
};

Then in WrapperStickyActions use the following snippet. It will handle if the action should be displayed or not regarding the parent props.

AppTable.tsx - WrapperStickyActions

<WrapperStickyActions>
  <Space direction="vertical">
    {filter && (
      <Button
        type="primary"
        icon={<SettingOutlined />}
        onClick={() => openFilterDrawer()}
      />
    )}
    {stickyActions?.export.active && (
      <Button
        icon={<FileExcelOutlined />}
        onClick={stickyActions?.export.function}
      />
    )}
    {/* ADD THIS */}
    {stickyActions?.delete.active && (
      <Button
        icon={<DeleteOutlined />}
        onClick={stickyActions?.delete.function}
        type="primary"
        danger
      />
    )}
    {/* ADD THIS */}
  </Space>
</WrapperStickyActions>

Now you can customize the function in parent component that called the AppTable to do what you need.