# Infinite Table Column API

Canonical page: https://infinite-table.com/docs/reference/column-api/

When rendering the `InfiniteTable` component, you can get access to the Column API through various column render props (for example, the [`columns.header`](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.header) render prop).

For the root API see the [API page](https://infinite-table.com/docs/reference/api/index.md).
See the [Infinite Table Keyboard Navigation API page](https://infinite-table.com/docs/reference/keyboard-navigation-api/index.md) for the keyboard navigation API.
For API on row/group selection, see the [Selection API page](https://infinite-table.com/docs/reference/selection-api).
See the [Infinite Table Row Selection API page](https://infinite-table.com/docs/reference/row-selection-api/index.md) for the row selection API.
See the [Infinite Table Row Detail API page](https://infinite-table.com/docs/reference/row-detail-api/index.md) for the row detail API (when master-detail is configured).

### clearSort

> Clears the sorting for the current column.

See related [`setSort`](https://infinite-table.com/docs/reference/infinite-table-props.md#setSort) prop.

Calling this will trigger [`onSortInfoChange`](https://infinite-table.com/docs/reference/datasource-props/index.md#onSortInfoChange)

### hideContextMenu (`() => void`)

> Hides the column context menu, if visible.

For showing the menu, see [`showContextMenu`](https://infinite-table.com/docs/reference/infinite-table-props.md#showContextMenu). To toggle the menu, see [`toggleContextMenu`](https://infinite-table.com/docs/reference/infinite-table-props.md#toggleContextMenu).

### setSort (`(sortDir: 1|-1|null) => void`)

> Sets the sort direction for the current column.

To clear the sort, pass `null` as the argument. See related [`clearSort`](https://infinite-table.com/docs/reference/infinite-table-props.md#clearSort)

Calling this will trigger [`onSortInfoChange`](https://infinite-table.com/docs/reference/datasource-props/index.md#onSortInfoChange).

### toggleSort (`(options?) => void`)

> Toggles the sorting for the current column. Aliased to [`toggleSortingForColumn`](https://infinite-table.com/docs/reference/api/index.md#toggleSortingForColumn).

This is the same method the component uses internally when the user clicks a column header.

If the column is not sorted, it gets sorted in ascending order.

If the column is sorted in ascending order, it gets sorted in descending order.

If the column is sorted in descending order, the sorting is cleared.

The `options` is optional and can have the `multiSortBehavior` property, which can be either `append` or `replace`. See related [`multiSortBehavior`](https://infinite-table.com/docs/reference/infinite-table-props.md#multiSortBehavior) prop. If not provided, the default behavior is used.

See related [`setSort`](https://infinite-table.com/docs/reference/column-api/index.md#setSort) and [`getSortingForColumn`](https://infinite-table.com/docs/reference/column-api/index.md#getSortingForColumn).

### setSort (`(dir: 1|-1|null) => void`)

> Sets the sorting for the current column. Aliased to [`setSortingForColumn`](https://infinite-table.com/docs/reference/api/index.md#setSortingForColumn).

The sort direction is specified by the `dir` parameter, which can be:

- `1` for ascending
- `-1` for descending
- `null` for clearing the sorting.

See related [`toggleSort`](https://infinite-table.com/docs/reference/column-api/index.md#toggleSort) and [`getSortDir`](https://infinite-table.com/docs/reference/column-api/index.md#getSortDir).

### getSortDir (`()=> 1|-1|null`)

> Returns the sorting currently applied to the current column. Aliased to [`getSortingForColumn`](https://infinite-table.com/docs/reference/api/index.md#getSortingForColumn).

The return value is:

- `1` for ascending
- `-1` for descending
- `null` for no sorting.

See related [`toggleSortingForColumn`](https://infinite-table.com/docs/reference/column-api/index.md#toggleSortingForColumn) and [`setSortingForColumn`](https://infinite-table.com/docs/reference/column-api/index.md#setSortingForColumn).

### clearSort (`() => void`)

> Clears the sorting for the current column.

It is the same as calling [`setSort`](https://infinite-table.com/docs/reference/column-api/index.md#setSort) with `null` as the argument.

### isSortable (`()=> boolean`)

> Returns whether the current column is sortable.

See related [`columnDefaultSortable`](https://infinite-table.com/docs/reference/infinite-table-props.md#columnDefaultSortable), [`columns.defaultSortable`](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.defaultSortable), [`columnTypes.defaultSortable`](https://infinite-table.com/docs/reference/infinite-table-props.md#columnTypes.defaultSortable) and [`sortable`](https://infinite-table.com/docs/reference/infinite-table-props.md#sortable)

### showContextMenu (`() => void`)

> Shows the column context menu, if not already visible.

For hiding the menu, see [`hideContextMenu`](https://infinite-table.com/docs/reference/infinite-table-props.md#hideContextMenu). To toggle the menu, see [`toggleContextMenu`](https://infinite-table.com/docs/reference/infinite-table-props.md#toggleContextMenu).

### toggleContextMenu (`() => void`)

> Toggles the column context menu.

For showing the menu, see [`showContextMenu`](https://infinite-table.com/docs/reference/infinite-table-props.md#showContextMenu). For hiding the menu, see [`hideContextMenu`](https://infinite-table.com/docs/reference/infinite-table-props.md#hideContextMenu).

**Example: Custom header with button to trigger the column context menu using the Column API**

The `preferredLanguage` column has a custom header that shows a button for triggering the column context menu using the Column API.

```ts
import {
  InfiniteTable,
  DataSource,
  InfiniteTablePropColumns,
} from '@infinite-table/infinite-react';

import * as React from 'react';

type Developer = {
  id: number;
  firstName: string;
  lastName: string;
  country: string;
  city: string;
  currency: string;
  preferredLanguage: string;
  stack: string;
  canDesign: 'yes' | 'no';
  hobby: string;
  salary: number;
  age: number;
};

const dataSource = () => {
  return fetch(process.env.NEXT_PUBLIC_BASE_URL + '/developers1k')
    .then((r) => r.json())
    .then((data: Developer[]) => data);
};

const columns: InfiniteTablePropColumns<Developer> = {
  currency: {
    field: 'currency',

    // custom menu icon
    renderMenuIcon: () => <div>🌎</div>,
  },

  preferredLanguage: {
    field: 'preferredLanguage',
    defaultWidth: 350,
    header: ({ columnApi, renderLocation }) => {
      // if we're inside the column menu with all columns, return only the col name
      if (renderLocation === 'column-menu') {
        return 'Preferred Language';
      }

      // but for the real column header
      // return this custom content
      return (
        <>
          Preferred Language{' '}
          <button
            // we need to stop propagation so we don't trigger a sort when this button is clicked
            onPointerDown={(e) => e.stopPropagation()}
            onMouseDown={(e) => {
              // again, stop propagation so the menu is not closed automatically
              // so we can control it in the line below
              e.stopPropagation();

              columnApi.toggleContextMenu(e.target);
            }}
            style={{ border: '1px solid magenta', margin: 2 }}
          >
            Toggle menu
          </button>
        </>
      );
    },

    // custom menu icon
    renderMenuIcon: () => <div>🌎</div>,
  },
  salary: {
    field: 'salary',
    // hide the menu icon
    renderMenuIcon: false,
  },
  country: {
    field: 'country',
  },
  id: { field: 'id', defaultWidth: 80, renderMenuIcon: false },
  firstName: {
    field: 'firstName',
  },
};

export default function ColumnContextMenuItems() {
  return (
    <>
      <DataSource<Developer> primaryKey="id" data={dataSource}>
        <InfiniteTable<Developer>
          debugId="getColumnMenuItems-example"
          columnHeaderHeight={70}
          columns={columns}
          getColumnMenuItems={(items, { column }) => {
            if (column.id === 'firstName') {
              // you can adjust the default items for a specific column
              items.splice(0, 0, {
                key: 'firstName',
                label: 'First name menu item',
                onAction: () => {
                  console.log('Hey there!');
                },
              });
            }

            items.push(
              {
                key: 'hello',
                label: 'Hello World',
                onAction: () => {
                  alert('Hello World from column ' + column.id);
                },
              },
              {
                key: 'translate',
                label: 'Translate',
                menu: {
                  items: [
                    {
                      key: 'translateToEnglish',
                      label: 'English',
                      onAction: () => {
                        console.log('Translate to English');
                      },
                    },
                    {
                      key: 'translateToFrench',
                      label: 'French',
                      onAction: () => {
                        console.log('Translate to French');
                      },
                    },
                  ],
                },
              },
            );
            return items;
          }}
        />
      </DataSource>
    </>
  );
}
```