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.
const column = {
firstName: {
style: {
color: 'red',
fontWeight: 'bold',
},
},
};
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.
const columns = {
salary: {
field: 'salary',
type: 'number',
style: ({ value, data, column, rowInfo }) => {
return {
color: value && value > 100_000 ? 'red' : 'tomato',
};
},
},
};
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> </>
Note
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 applieddata
- the data object for the current row. The type of this object isDATA_TYPE | Partial<DATA_TYPE> | null
. For regular rows, it will be of typeDATA_TYPE
, while for group rows it will bePartial<DATA_TYPE>
. For rows not yet loaded (because of batching being used), it will benull
.rowInfo
- the information about the current row - see Using RowInfo for more details.value
- the underlying value of the current cell - will generally bedata[column.field]
, if the column is bound to afield
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.
const columns = {
firstName: {
className: 'first-name-column',
},
};
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.
const columns = {
salary: {
field: 'salary',
type: 'number',
className: ({ value, data, column, rowInfo }) => {
return value && value > 100_000 ? 'red-color' : 'tomato-color',
},
},
}
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> </>