Column Styling

Using the column style

The most straightforward way to style the cells in a column is to use the column.style property as an object.
Styling a column in the DataGrid
const column = {
  firstName: {
    style: {
      color: 'red',
      fontWeight: 'bold',
    },
  },
};
Using column.style as an object
View Mode
Fork
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('https://infinite-table.com/.netlify/functions/json-server' + '/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> domProps={domProps} columns={columns} />
    </DataSource>
  );
}
The column.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 property allows you to style the cells based on the cell's value or other properties.
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',
      };
    },
  },
};
View Mode
Fork
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('https://infinite-table.com/.netlify/functions/json-server' + '/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> columns={columns} columnDefaultWidth={200} />
      </DataSource>
    </>
If defined as a function, the column.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 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 property, the column.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.
Styling a column using column.className
const columns = {
  firstName: {
    className: 'first-name-column',
  },
};
View Mode
Fork
import * as React from 'react';

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

import styles from './coloring.module.css';

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

  name: {
    field: 'firstName',
    header: 'Name',
    className: styles.redColor,
  },
};

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

const dataSource = () => {
  return fetch('https://infinite-table.com/.netlify/functions/json-server' + '/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> domProps={domProps} columns={columns} />
    </DataSource>
  );
}
Using functions for the column.className property allows you to style the cells based on the cell's data/value/rowInfo etc.
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',
    },
  },
}
View Mode
Fork
import { InfiniteTable, DataSource } from '@infinite-table/infinite-react';
import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react';

import styles from './coloring.module.css';

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('https://infinite-table.com/.netlify/functions/json-server' + '/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',
    className: ({ value }) => {
      return value && value > 100_000 ? styles.redColor : styles.tomatoColor;
    },
  },
  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> columns={columns} columnDefaultWidth={200} />
      </DataSource>
    </>