add sparklines example to docs

www/content/docs/learn/examples/using-sparklines-example.page.md

@@ -0,0 +1,46 @@
+---
+title: 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`](https://www.npmjs.com/package/react-sparklines)  library.
+
+The most important part is the <PropLink name="columns.renderValue" /> property, which allows you to render a custom React component for the cell value.
+
+```tsx {11-23} title="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 }) => {
+      return (
+        <Sparklines
+          data={value}
+          style={{
+            width: '100%',
+          }}
+          height={30}
+        >
+          <SparklinesLine color="#253e56" />
+        </Sparklines>
+      );
+    },
+  },
+}
+```
+
+
+<Sandpack size="md" viewMode="preview" deps="react-sparklines" title="Using a sparkline component">
+
+```tsx file="./using-sparklines-example.page.tsx"
+
+```
+
+</Sandpack>

www/content/docs/learn/examples/using-sparklines-example.page.tsx

@@ -0,0 +1,96 @@
+import {
+  InfiniteTable,
+  DataSource,
+  InfiniteTableColumn,
+} from '@infinite-table/infinite-react';
+import { useMemo, useState } from '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 }) => {
+      return (
+        <Sparklines
+          data={value}
+          style={{
+            width: '100%',
+          }}
+          height={30}
+        >
+          <SparklinesLine color="#253e56" />
+        </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(process.env.NEXT_PUBLIC_BASE_URL + '/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>
+  );
+}

www/content/docs/reference/infinite-table-props.page.md

@@ -1518,6 +1518,14 @@ The <PropLink name="columns.renderValue">renderValue</PropLink> and <PropLink na
 In the `column.renderValue` function you can use hooks or <PropLink name="columns.components.ColumnCell" nocode>render custom React components</PropLink>. To make it easier to access the param of the `renderValue` function, we've exposed the <HookLink name="useInfiniteColumnCell" /> - use it to gain access to the same object that is passed as an argument to the `renderValue` function.
 
 </Note>
+
+<Sandpack title="Using a sparkline component" size="md" viewMode="preview" deps="react-sparklines">
+
+```tsx file="$DOCS/learn/examples/using-sparklines-example.page.tsx" 
+```
+
+</Sandpack>
+
 </Prop>
 
 <Prop name="columns.resizable" type="boolean">

www/src/components/MDX/Sandpack/index.tsx

@@ -23,6 +23,7 @@ const DEPS_VERSIONS: Record<string, string> = {
   'ag-grid-community': '27.1.0',
   'ag-grid-react': '27.1.0',
   'ag-grid-enterprise': '27.1.0',
+  'react-sparklines': '1.7.0',
   '@progress/kendo-react-grid': '5.1.0',
 
   // for material date picker

www/src/sidebarLearn.json

@@ -287,6 +287,10 @@
         "title": "Live updates example",
         "path": "/docs/learn/examples/live-updates-example"
       },
+      {
+        "title": "Using sparklines example",
+        "path": "/docs/learn/examples/using-sparklines-example"
+      },
       {
         "title": "Dynamic pivoting example",
         "path": "/docs/learn/examples/dynamic-pivoting-example"