Sparklines Example

This example shows how to use integrate a sparkline component in a DataGrid column.

For this demo, we're using the react-sparklines library.

The most important part is the columns.renderValue property, which allows you to render a custom React component for the cell value.

Using column.renderValue to render a sparkline

const columns = {
  // ... other columns
  id: {
    field: 'id',
    defaultWidth: 100,
  },
  bugFixes: {
    field: 'bugFixes',
    header: 'Bug Fixes',
    defaultWidth: 300,
    renderValue: ({ value, data }) => {
      const color =
        data?.department === 'IT' || data?.department === 'Management'
          ? 'tomato'
          : '#253e56';
      return (
        <Sparklines
          data={value}
          style={{
            width: '100%',
          }}
          height={30}
        >
          <SparklinesLine color={color} />
        </Sparklines>
      );
    },
  },
}

COPY

This demo renders a sparkline and changes the color of the sparkline based on the department field in the row (red for IT or Management, blue for everything else).

View Mode

Fork Fork

import {
  InfiniteTable,
  DataSource,
  InfiniteTableColumn,
} from '@infinite-table/infinite-react';
import { Sparklines, SparklinesLine } from 'react-sparklines';

export type Employee = {
  id: number;
  companyName: string;
  companySize: string;
  firstName: string;
  lastName: string;
  country: string;
  countryCode: string;
  city: string;
  bugFixes: number[];
  streetName: string;
  streetPrefix: string;
  streetNo: string;
  department: string;
  team: string;
  salary: number;
  currency: number;
  age: number;
  email: string;
};
export const columns: Record<string, InfiniteTableColumn<Employee>> = {
  firstName: {
    field: 'firstName',
    header: 'First Name',
  },
  country: {
    field: 'country',
    header: 'Country',
    columnGroup: 'location',
  },
  bugFixes: {
    field: 'bugFixes',
    header: 'Bug Fixes',
    defaultWidth: 300,
    renderValue: ({ value, data }) => {
      const color =
        data?.department === 'IT' || data?.department === 'Management'
          ? 'tomato'
          : '#253e56';
      return (
        <Sparklines
          data={value}
          style={{
            width: '100%',
          }}
          height={30}
        >
          <SparklinesLine color={color} />
        </Sparklines>
      );
    },
  },
  city: {
    field: 'city',
    header: 'City',
    columnGroup: 'address',
  },
  salary: {
    field: 'salary',
    type: 'number',
    header: 'Salary',
  },
  department: {
    field: 'department',
    header: 'Department',
  },
  team: {
    field: 'team',
    header: 'Team',
  },
};

const dataSource = () => {
  return fetch('https://infinite-table.com/.netlify/functions/json-server' + '/employees10k')
    .then((r) => r.json())
    .then((data: Employee[]) => {
      return data.map((employee) => {
        return {
          ...employee,
          bugFixes: [...Array(10)].map(() => Math.round(Math.random() * 100)),
        };
      });
    });
};

export default function App() {
  return (
    <DataSource<Employee> data={dataSource} primaryKey="id">
      <InfiniteTable<Employee> columns={columns} columnDefaultWidth={150} />
    </DataSource>
  );
}