Nathan Collins

Posted on Jan 16

Getting Started with RSuite Table in React: Building Your First Data Table

#javascript #webdev #react #beginners

RSuite Table is a feature-rich table component from the RSuite UI library that provides essential table functionality like sorting, filtering, pagination, and row selection with a clean, intuitive API. It's part of the RSuite component suite, offering a consistent design system for building data-rich interfaces. This guide walks through setting up and creating your first interactive data table using RSuite Table with React, from installation to a working implementation. This is part 16 of a series on using RSuite Table 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 RSuite and its styles:

npm install rsuite

Or with yarn:

yarn add rsuite

Or with pnpm:

pnpm add rsuite

After installation, your package.json should include:

{
  "dependencies": {
    "rsuite": "^5.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

RSuite 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 'rsuite/dist/rsuite.min.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 table component. Create a new file src/DataTable.jsx:

// src/DataTable.jsx
import React from 'react';
import { Table } from 'rsuite';

const { Column, HeaderCell, Cell } = Table;

function DataTable() {
  const data = [
    { 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' }
  ];

  return (
    <div style={{ padding: '20px' }}>
      <h2>Employee Directory</h2>
      <Table
        data={data}
        height={400}
        onRowClick={(rowData) => {
          console.log('Row clicked:', rowData);
        }}
      >
        <Column width={80} fixed>
          <HeaderCell>ID</HeaderCell>
          <Cell dataKey="id" />
        </Column>

        <Column width={200}>
          <HeaderCell>Name</HeaderCell>
          <Cell dataKey="name" />
        </Column>

        <Column width={250}>
          <HeaderCell>Email</HeaderCell>
          <Cell dataKey="email" />
        </Column>

        <Column width={100}>
          <HeaderCell>Age</HeaderCell>
          <Cell dataKey="age" />
        </Column>

        <Column width={150}>
          <HeaderCell>City</HeaderCell>
          <Cell dataKey="city" />
        </Column>
      </Table>
    </div>
  );
}

export default DataTable;

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

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

function App() {
  return (
    <div className="App">
      <h1>RSuite Table Example</h1>
      <DataTable />
    </div>
  );
}

export default App;

This creates a fully functional data table with:

Fixed first column (ID stays visible when scrolling)
Row click handling
Clean, modern styling from RSuite
Responsive column widths

Understanding the Basics

RSuite Table uses a column-based structure where:

Table: Main component that wraps the table
Column: Defines each table column
HeaderCell: Column header content
Cell: Cell content with dataKey mapping to data property
data: Array of row data objects

Key concepts:

Columns: Define table structure using Column, HeaderCell, and Cell components
Data: Array of objects where each object represents a table row
dataKey: Maps to a property in your row data objects
Props: Enable features like sorting, pagination, selection

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

// src/SimpleTable.jsx
import React from 'react';
import { Table } from 'rsuite';

const { Column, HeaderCell, Cell } = Table;

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

  return (
    <Table data={data} height={300}>
      <Column width={80}>
        <HeaderCell>ID</HeaderCell>
        <Cell dataKey="id" />
      </Column>
      <Column width={200}>
        <HeaderCell>Name</HeaderCell>
        <Cell dataKey="name" />
      </Column>
      <Column width={100}>
        <HeaderCell>Value</HeaderCell>
        <Cell dataKey="value" />
      </Column>
    </Table>
  );
}

export default SimpleTable;

Practical Example / Building Something Real

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

// src/ProductInventory.jsx
import React, { useState } from 'react';
import { Table, Tag, Badge } from 'rsuite';

const { Column, HeaderCell, Cell } = Table;

function ProductInventory() {
  const [data, setData] = 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' 
    }
  ]);

  return (
    <div style={{ padding: '20px' }}>
      <h2>Product Inventory</h2>
      <Table
        data={data}
        height={400}
        hover
        bordered
        cellBordered
        onRowClick={(rowData) => {
          console.log('Product clicked:', rowData);
        }}
      >
        <Column width={80} fixed>
          <HeaderCell>ID</HeaderCell>
          <Cell dataKey="id" />
        </Column>

        <Column width={200} sortable>
          <HeaderCell>Product Name</HeaderCell>
          <Cell dataKey="name" />
        </Column>

        <Column width={150} sortable>
          <HeaderCell>Category</HeaderCell>
          <Cell>
            {(rowData) => (
              <Tag color="blue">{rowData.category}</Tag>
            )}
          </Cell>
        </Column>

        <Column width={120} sortable>
          <HeaderCell>Price</HeaderCell>
          <Cell>
            {(rowData) => `$${rowData.price.toFixed(2)}`}
          </Cell>
        </Column>

        <Column width={100} sortable>
          <HeaderCell>Stock</HeaderCell>
          <Cell>
            {(rowData) => (
              <span style={{ 
                color: rowData.stock < 10 ? 'red' : 'green',
                fontWeight: 'bold'
              }}>
                {rowData.stock}
              </span>
            )}
          </Cell>
        </Column>

        <Column width={120}>
          <HeaderCell>Status</HeaderCell>
          <Cell>
            {(rowData) => (
              <Badge 
                content={rowData.status} 
                color={rowData.status === 'In Stock' ? 'green' : 'orange'}
              />
            )}
          </Cell>
        </Column>
      </Table>
    </div>
  );
}

export default ProductInventory;

This example demonstrates:

Sortable columns (click column headers)
Custom cell rendering with React components (Tag, Badge)
Conditional styling based on data values
Hover effects and borders
Row click handling
Fixed first column
Currency formatting

Common Issues / Troubleshooting

Table not rendering: Make sure you've imported the CSS file (rsuite/dist/rsuite.min.css). Without styles, the table won't display correctly.
Columns not displaying: Ensure you're using the correct structure with Column, HeaderCell, and Cell components. The dataKey prop in Cell must match a property in your data objects.
Sorting not working: Set sortable prop on Column components. RSuite Table handles sorting automatically when this prop is set.
Custom cell rendering: Use a function as children of Cell component: <Cell>{(rowData) => <YourComponent />}</Cell>
Styling issues: RSuite comes with default styles. You can customize them by overriding CSS classes or using RSuite's theme system.

Next Steps

Now that you have a basic understanding of RSuite Table:

Learn about advanced features like row selection and expansion
Explore pagination and virtual scrolling
Implement custom filters and search
Add column resizing and reordering
Discover tree table features for hierarchical data
Check the official documentation: https://rsuitejs.com/components/table/
Look for part 17 of this series for more advanced topics

Summary

You've successfully set up RSuite Table in your React application and created your first interactive data table. The component provides a clean, intuitive API for building data-rich interfaces with essential table functionality like sorting, filtering, and custom rendering, all styled with RSuite's modern design system.

SEO Keywords

rsuite-table
RSuite Table React
rsuite-table tutorial
React data table RSuite
rsuite-table installation
React table component
rsuite-table example
React data grid
rsuite-table setup
React interactive table
RSuite UI table
React table library
rsuite-table getting started
React table with sorting
rsuite-table custom rendering

DEV Community