Nathan Collins

Posted on Jan 16

Getting Started with Smart React Grid: Building Your First Data Grid

#webdev #programming #javascript #beginners

Smart React Grid is a powerful, feature-rich data grid component for React that provides essential grid functionality like sorting, filtering, pagination, and editing with a clean, intuitive API. It's designed to be easy to use while offering customization options for building data-intensive interfaces. This guide walks through setting up and creating your first interactive data grid using Smart React Grid with React, from installation to a working implementation. This is part 19 of a series on using Smart React Grid with React.

Prerequisites

Before you begin, make sure you have:

Node.js version 14.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Basic knowledge of React hooks (useState)
Familiarity with JavaScript/TypeScript

Installation

Install Smart React Grid using your preferred package manager:

npm install smart-webcomponents-react

Or with yarn:

yarn add smart-webcomponents-react

Or with pnpm:

pnpm add smart-webcomponents-react

After installation, your package.json should include:

{
  "dependencies": {
    "smart-webcomponents-react": "^10.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

Smart React Grid requires CSS styles to be imported. Add the styles to your main application file:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import 'smart-webcomponents-react/source/styles/smart.default.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

First Example / Basic Usage

Let's create a simple grid component. Create a new file src/DataGrid.jsx:

// src/DataGrid.jsx
import React from 'react';
import { Grid } from 'smart-webcomponents-react/grid';

function DataGrid() {
  const dataSource = [
    { id: 1, name: 'John Doe', email: 'john@example.com', age: 28, city: 'New York' },
    { id: 2, name: 'Jane Smith', email: 'jane@example.com', age: 32, city: 'London' },
    { id: 3, name: 'Bob Johnson', email: 'bob@example.com', age: 45, city: 'Paris' },
    { id: 4, name: 'Alice Williams', email: 'alice@example.com', age: 29, city: 'Tokyo' }
  ];

  const columns = [
    { label: 'ID', dataField: 'id', width: 80 },
    { label: 'Name', dataField: 'name', width: 200 },
    { label: 'Email', dataField: 'email', width: 250 },
    { label: 'Age', dataField: 'age', width: 100 },
    { label: 'City', dataField: 'city', width: 150 }
  ];

  return (
    <div style={{ padding: '20px' }}>
      <h2>Employee Directory</h2>
      <Grid
        dataSource={dataSource}
        columns={columns}
        sorting={{ enabled: true }}
        filtering={{ enabled: true }}
        paging={{ enabled: true, pageSize: 10 }}
      />
    </div>
  );
}

export default DataGrid;

Now, update your App.jsx to use the data grid:

// src/App.jsx
import React from 'react';
import DataGrid from './DataGrid';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>Smart React Grid Example</h1>
      <DataGrid />
    </div>
  );
}

export default App;

This creates a fully functional data grid with:

Sortable columns (click column headers)
Filtering capabilities
Pagination (10 rows per page)
Clean, modern styling

Understanding the Basics

Smart React Grid uses a configuration-based approach where:

dataSource: Array of row data objects
columns: Array of column definition objects
label: Column header text
dataField: Property key in your row data objects
width: Column width in pixels

Key concepts:

Columns: Define table structure with label, dataField, and options
Data Source: Array of objects where each object represents a table row
Features: Enable features like sorting, filtering, pagination through props
Styling: Built-in themes and customization options

Here's a simpler example with just a few columns:

// src/SimpleGrid.jsx
import React from 'react';
import { Grid } from 'smart-webcomponents-react/grid';

function SimpleGrid() {
  const dataSource = [
    { id: 1, name: 'Item 1', value: 100 },
    { id: 2, name: 'Item 2', value: 200 },
    { id: 3, name: 'Item 3', value: 300 }
  ];

  const columns = [
    { label: 'ID', dataField: 'id' },
    { label: 'Name', dataField: 'name' },
    { label: 'Value', dataField: 'value' }
  ];

  return (
    <Grid
      dataSource={dataSource}
      columns={columns}
    />
  );
}

export default SimpleGrid;

Practical Example / Building Something Real

Let's build a product inventory grid with more features:

// src/ProductInventory.jsx
import React, { useState } from 'react';
import { Grid } from 'smart-webcomponents-react/grid';

function ProductInventory() {
  const [dataSource, setDataSource] = useState([
    { 
      id: 1, 
      name: 'Laptop', 
      category: 'Electronics', 
      price: 999.99, 
      stock: 15, 
      status: 'In Stock' 
    },
    { 
      id: 2, 
      name: 'Mouse', 
      category: 'Electronics', 
      price: 29.99, 
      stock: 8, 
      status: 'Low Stock' 
    },
    { 
      id: 3, 
      name: 'Keyboard', 
      category: 'Electronics', 
      price: 79.99, 
      stock: 12, 
      status: 'In Stock' 
    },
    { 
      id: 4, 
      name: 'Monitor', 
      category: 'Electronics', 
      price: 299.99, 
      stock: 5, 
      status: 'Low Stock' 
    },
    { 
      id: 5, 
      name: 'Desk Chair', 
      category: 'Furniture', 
      price: 199.99, 
      stock: 20, 
      status: 'In Stock' 
    }
  ]);

  const columns = [
    { 
      label: 'ID', 
      dataField: 'id', 
      width: 80,
      allowSort: true
    },
    { 
      label: 'Product Name', 
      dataField: 'name', 
      width: 200,
      allowSort: true,
      allowFilter: true
    },
    { 
      label: 'Category', 
      dataField: 'category', 
      width: 150,
      allowSort: true,
      allowFilter: true
    },
    { 
      label: 'Price', 
      dataField: 'price', 
      width: 120,
      allowSort: true,
      formatFunction: (value) => `$${value.toFixed(2)}`
    },
    { 
      label: 'Stock', 
      dataField: 'stock', 
      width: 100,
      allowSort: true,
      template: (row) => {
        const stock = row.stock;
        return (
          <span style={{ 
            color: stock < 10 ? 'red' : 'green',
            fontWeight: 'bold'
          }}>
            {stock}
          </span>
        );
      }
    },
    { 
      label: 'Status', 
      dataField: 'status', 
      width: 120,
      allowSort: true,
      template: (row) => {
        const status = row.status;
        return (
          <span style={{
            padding: '4px 8px',
            borderRadius: '4px',
            backgroundColor: status === 'In Stock' ? '#d4edda' : '#fff3cd',
            color: status === 'In Stock' ? '#155724' : '#856404'
          }}>
            {status}
          </span>
        );
      }
    }
  ];

  return (
    <div style={{ padding: '20px' }}>
      <h2>Product Inventory</h2>
      <Grid
        dataSource={dataSource}
        columns={columns}
        sorting={{ enabled: true }}
        filtering={{ enabled: true }}
        paging={{ enabled: true, pageSize: 5 }}
        selection={{ enabled: true, mode: 'multiple' }}
        editing={{ enabled: true }}
        onRowClick={(event) => {
          console.log('Row clicked:', event.detail.row.data);
        }}
      />
    </div>
  );
}

export default ProductInventory;

This example demonstrates:

Sortable and filterable columns
Custom cell templates with conditional styling
Custom formatting (currency for price)
Row selection (multiple)
Row click handling
Pagination with customizable page size
Editing capabilities

Common Issues / Troubleshooting

Grid not rendering: Make sure you've imported the CSS file (smart-webcomponents-react/source/styles/smart.default.css). Without styles, the grid won't display correctly.
Data not displaying: Verify that your dataSource array contains objects and that columns dataField values match the property names in your data objects.
Sorting/filtering not working: Ensure you've enabled these features in the Grid props (sorting={{ enabled: true }}, filtering={{ enabled: true }}).
Custom templates not rendering: Make sure you're using the template function correctly in column definitions. The function receives the row object as a parameter.
Styling issues: Smart React Grid comes with default styles. You can customize them by overriding CSS classes or using the built-in theme system.

Next Steps

Now that you have a basic understanding of Smart React Grid:

Learn about advanced features like grouping and aggregation
Explore custom cell editors and validators
Implement server-side data loading and pagination
Add export functionality (CSV, Excel, PDF)
Discover column resizing and reordering
Check the official documentation: https://htmlelements.com/react/demos/grid/overview/
Look for part 20 of this series for more advanced topics

Summary

You've successfully set up Smart React Grid in your React application and created your first interactive data grid. The component provides a clean, simple API for building data-rich interfaces with essential grid functionality like sorting, filtering, pagination, and editing, all with modern styling and excellent performance.

SEO Keywords

smart-react-grid
Smart React Grid tutorial
React data grid Smart
smart-react-grid installation
React table component
smart-react-grid example
React data grid library
smart-react-grid setup
React interactive grid
Smart WebComponents grid
React table with sorting
smart-react-grid filtering
React data grid component
smart-react-grid pagination
React grid component tutorial

DEV Community