dib-grid

Extended Mantine v8.3.7 Table with integrated chart components.

Overview

dib-grid provides a set of React components that seamlessly integrate charts into Mantine tables, allowing you to display inline visualizations within your data tables. Perfect for dashboards, financial data, analytics, and any tabular data that benefits from visual trends.

Features

• 🎯 Three Chart Components: Sparklines, Bar Charts, and Area Charts optimized for table cells
• 📊 Mantine v8.3.7 Native: Built on top of official Mantine components
• 🎨 Customizable: Full control over colors, sizes, tooltips, and styling
• 📱 Responsive: Works seamlessly with Mantine's Table.ScrollContainer
• 🔧 TypeScript: Fully typed with comprehensive prop types
• ⚡ Lightweight: Minimal overhead, uses Mantine Charts (Recharts) under the hood
• 🎭 Flexible: Use individually or combine multiple chart types in one table

Installation

npm install @mantine/core@8.3.7 @mantine/charts@8.3.7 @mantine/hooks@8.3.7 recharts

Components

TableCellSparkline

A mini line chart perfect for showing trends over time in table cells.

Props:

• data: Array of { value: number; label?: string } - The data points to display
• color: string (default: 'blue') - Chart color (any Mantine color)
• height: number (default: 40) - Chart height in pixels
• width: number | string (default: '100%') - Chart width
• strokeWidth: number (default: 2) - Line stroke width
• withTooltip: boolean (default: true) - Show tooltip on hover
• curveType: 'linear' | 'monotone' | 'natural' | 'step' (default: 'monotone') - Line curve type

Example:

import { Table } from '@mantine/core';
import { TableCellSparkline } from './components';

<Table.Td>
  <TableCellSparkline
    data={[
      { value: 170 },
      { value: 172 },
      { value: 168 },
      { value: 175 },
      { value: 178 }
    ]}
    color="teal"
    height={35}
  />
</Table.Td>

TableCellBarChart

A mini bar chart for comparing values or showing distributions in table cells.

Props:

• data: Array of { value: number; label?: string; color?: string } - The data to display
• color: string (default: 'blue') - Chart color
• height: number (default: 40) - Chart height in pixels
• width: number | string (default: '100%') - Chart width
• withTooltip: boolean (default: true) - Show tooltip on hover
• orientation: 'vertical' | 'horizontal' (default: 'vertical') - Bar orientation

Example:

import { Table } from '@mantine/core';
import { TableCellBarChart } from './components';

<Table.Td>
  <TableCellBarChart
    data={[
      { value: 45, label: 'Mon' },
      { value: 52, label: 'Tue' },
      { value: 38, label: 'Wed' },
      { value: 65, label: 'Thu' },
      { value: 48, label: 'Fri' }
    ]}
    color="blue"
  />
</Table.Td>

TableCellAreaChart

A mini area chart with fill for emphasizing volume or magnitude.

Props:

• data: Array of { value: number; label?: string } - The data points
• color: string (default: 'blue') - Chart color
• height: number (default: 40) - Chart height in pixels
• width: number | string (default: '100%') - Chart width
• withTooltip: boolean (default: true) - Show tooltip on hover
• curveType: 'linear' | 'monotone' | 'natural' | 'step' (default: 'monotone') - Line curve type
• fillOpacity: number (default: 0.2) - Fill opacity (0-1)

Example:

import { Table } from '@mantine/core';
import { TableCellAreaChart } from './components';

<Table.Td>
  <TableCellAreaChart
    data={[
      { value: 165 },
      { value: 168 },
      { value: 172 },
      { value: 175 },
      { value: 178 }
    ]}
    color="grape"
    fillOpacity={0.3}
  />
</Table.Td>

Complete Example

import { MantineProvider, Table, Badge } from '@mantine/core';
import { TableCellSparkline, TableCellBarChart, TableCellAreaChart } from './components';
import '@mantine/core/styles.css';
import '@mantine/charts/styles.css';

function StockTable() {
  const data = [
    {
      symbol: 'AAPL',
      price: 178.25,
      change: 2.5,
      trend: [
        { value: 170 },
        { value: 172 },
        { value: 175 },
        { value: 178 }
      ],
      volume: [
        { value: 45, label: 'Mon' },
        { value: 52, label: 'Tue' },
        { value: 48, label: 'Fri' }
      ]
    }
  ];

  return (
    <MantineProvider>
      <Table>
        <Table.Thead>
          <Table.Tr>
            <Table.Th>Symbol</Table.Th>
            <Table.Th>Price</Table.Th>
            <Table.Th>Change</Table.Th>
            <Table.Th>Trend</Table.Th>
            <Table.Th>Volume</Table.Th>
          </Table.Tr>
        </Table.Thead>
        <Table.Tbody>
          {data.map((stock) => (
            <Table.Tr key={stock.symbol}>
              <Table.Td>{stock.symbol}</Table.Td>
              <Table.Td>${stock.price}</Table.Td>
              <Table.Td>
                <Badge color={stock.change >= 0 ? 'teal' : 'red'}>
                  {stock.change >= 0 ? '+' : ''}{stock.change}%
                </Badge>
              </Table.Td>
              <Table.Td>
                <TableCellSparkline
                  data={stock.trend}
                  color={stock.change >= 0 ? 'teal' : 'red'}
                />
              </Table.Td>
              <Table.Td>
                <TableCellBarChart data={stock.volume} color="blue" />
              </Table.Td>
            </Table.Tr>
          ))}
        </Table.Tbody>
      </Table>
    </MantineProvider>
  );
}

Running the Demo

1. Install dependencies:

npm install

2. Start the development server:

npm run dev

3. Open your browser to http://localhost:3000

Building for Production

npm run build

Use Cases

• Financial Dashboards: Display stock prices with trend sparklines
• Analytics Tables: Show metrics with inline charts
• Sales Reports: Compare performance across periods
• Monitoring Dashboards: Track metrics over time
• Data Visualization: Any tabular data that benefits from visual trends

Customization Tips

Colors

Use any Mantine color name:

<TableCellSparkline data={data} color="teal" />
<TableCellSparkline data={data} color="red" />
<TableCellSparkline data={data} color="grape" />

Sizes

Adjust chart dimensions to fit your table:

<TableCellSparkline data={data} height={30} width={100} />
<TableCellSparkline data={data} height={50} width="100%" />

Conditional Styling

Change colors based on data:

<TableCellSparkline
  data={trendData}
  color={value >= 0 ? 'teal' : 'red'}
/>

Browser Support

Same as Mantine v8.3.7:

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Tech Stack

• React 18
• TypeScript 5
• Mantine v8.3.7 (Core & Charts)
• Recharts 2.15
• Vite 6

License

MIT © Andy Dobbs

Contributing

Contributions are welcome! Feel free to open issues or submit pull requests.

Resources

• Mantine Documentation
• Mantine Table
• Mantine Charts

Acknowledgments

Built with Mantine - A fully featured React components library.