# Column Styling

> Styling columns in the InfiniteTable React DataGrid via both style and className properties.

Canonical page: https://infinite-table.com/docs/learn/columns/cell-and-column-styling

## Using the column `style`

The most straightforward way to style the cells in a column is to use the [column.style](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.style) property as an object.

```ts title="Styling a column in the DataGrid"
const column = {
  firstName: {
    style: {
      color: 'red',
      fontWeight: 'bold',
    },
  },
};
```

```tsx
import * as React from 'react';

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

const columns: InfiniteTablePropColumns<Developer> = {
  id: {
    field: 'id',
    defaultWidth: 80,
  },

  name: {
    field: 'firstName',
    header: 'Name',
    style: {
      color: 'red',
      fontWeight: 'bold',
    },
  },
};

type Developer = {
  id: number;
  firstName: string;
  lastName: string;
  age: number;
};

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

const domProps = {
  style: {
    minHeight: 300,
  },
};
export default function App() {
  return (
    <DataSource<Developer> primaryKey="id" data={dataSource}>
      <InfiniteTable<Developer>
        debugId="column-style-object-example"
        domProps={domProps}
        columns={columns}
      />
    </DataSource>
  );
}
```

The [column.style](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.style) property can either be an object (of type `React.CSSProperties`) or a function that returns an object (of the same type).

Using functions for the [column.style](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.style) property allows you to style the cells based on the cell's value or other properties.

```ts {6} title="Styling a column using a style function"
const columns = {
  salary: {
    field: 'salary',
    type: 'number',
    style: ({ value, data, column, rowInfo }) => {
      return {
        color: value && value > 100_000 ? 'red' : 'tomato',
      };
    },
  },
};
```

**Example: Using column.style as a function**

```tsx
import { InfiniteTable, DataSource } from '@infinite-table/infinite-react';
import type { 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> = {
  id: {
    field: 'id',
    defaultWidth: 80,
  },
  firstName: { field: 'firstName' },

  salary: {
    field: 'salary',
    type: 'number',
    style: ({ value }) => {
      return {
        color: value && value > 100_000 ? 'red' : 'tomato',
      };
    },
  },
  preferredLanguage: { field: 'preferredLanguage' },
  stack: { field: 'stack' },
  country: { field: 'country' },
  age: { field: 'age', type: 'number' },

  currency: { field: 'currency', type: 'number' },
};

export default function App() {
  return (
    <>
      <DataSource<Developer> primaryKey="id" data={dataSource}>
        <InfiniteTable<Developer>
          debugId="column-style-fn-example"
          columns={columns}
          columnDefaultWidth={200}
        />
      </DataSource>
    </>
  );
}
```

If defined as a function, the [column.style](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.style) accepts an object as a parameter, which has the following properties:

- `column` - the current column where the style is being applied
- `data` - the data object for the current row. The type of this object is `DATA_TYPE | Partial<DATA_TYPE> | null`. For regular rows, it will be of type `DATA_TYPE`, while for group rows it will be `Partial<DATA_TYPE>`. For rows not yet loaded (because of batching being used), it will be `null`.
- `rowInfo` - the information about the current row - see [Using RowInfo](https://infinite-table.com/docs/learn/rows/using-row-info.md) for more details.
- `value` - the underlying value of the current cell - will generally be `data[column.field]`, if the column is bound to a `field` property

## Using the column `className`

Mirroring the behavior already described for the [column.style](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.style) property, the [column.className](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.className) property can be used to apply a CSS class to the cells in a column.

It can be used as a string or a function that returns a string.

```ts title="Styling a column using column.className"
const columns = {
  firstName: {
    className: 'first-name-column',
  },
};
```

**Example: Using column.className as an string**

```tsx files=["column-className-string-example.page.tsx","coloring.module.css"]

```

Using functions for the [column.className](https://infinite-table.com/docs/reference/infinite-table-props.md#columns.className) property allows you to style the cells based on the cell's data/value/rowInfo etc.

```ts {6} title="Styling a column using a className function"
const columns = {
  salary: {
    field: 'salary',
    type: 'number',
    className: ({ value, data, column, rowInfo }) => {
      return value && value > 100_000 ? 'red-color' : 'tomato-color',
    },
  },
}
```

**Example: Using column.className as a function**

```tsx files=["column-className-fn-example.page.tsx","coloring.module.css"]

```