Documentation

Quick Start

This guide will help you quickly set up Simple Table in your React project. In just a few minutes, you'll have a fully functional data table.

CodeSandbox

SimpleTable Props

Main Component Props

Property	Required	Description

`defaultHeaders` HeaderObject[]	Required	Array of column definitions that specify the structure of your table.
`rows` Row[]	Required	Array of data objects to display in the table. Each object represents a row.
`height` string	Optional	Height of the table container. When specified, Simple Table handles vertical scrolling internally with a fixed header. When omitted, the table expands to fit all rows and overflows the parent container. Most applications should specify a height.
`rowHeight` number	Optional	Height of each individual row in pixels.
`editColumns` boolean	Optional	Enable column reordering by drag and drop.
`selectableCells` boolean	Optional	Enable cell selection functionality.
`theme` Theme	Optional	Custom theme object to override default styling.

🔑 Understanding Accessor and Data Format

The accessor property in your column definitions creates a direct link between your data and what displays in each column. Here's how it works:

How Accessor Maps to Data

Each accessor value must match a property name in your data objects:

TypeScript

Copy

1// Column definitions with accessors
2const headers = [
3  { accessor: "id", label: "ID", width: 80 },
4  { accessor: "name", label: "Name", width: 150 },
5  { accessor: "age", label: "Age", width: 100 }
6];
7
8// Data objects - property names match the accessors
9const data = [
10  { id: 1, name: "John Doe", age: 30 },
11  { id: 2, name: "Jane Smith", age: 25 }
12];
13
14// The table will display:
15// | ID | Name       | Age |
16// |----|------------|-----|
17// | 1  | John Doe   | 30  |
18// | 2  | Jane Smith | 25  |

Expected Data Format

Data must be an array of objects - Each object represents one row
Property names must match accessors exactly - Case-sensitive and must be valid JavaScript property names
All rows should have the same structure - While missing properties won't break the table, they'll display as empty cells
Nested properties are supported - Use dot notation like "user.name" or "address.city"

Example with Nested Data

TypeScript

Copy

1const headers = [
2  { accessor: "id", label: "ID", width: 80 },
3  { accessor: "user.name", label: "Name", width: 150 },
4  { accessor: "user.email", label: "Email", width: 200 },
5  { accessor: "address.city", label: "City", width: 120 }
6];
7
8const data = [
9  {
10    id: 1,
11    user: { name: "John Doe", email: "john@example.com" },
12    address: { city: "New York", zip: "10001" }
13  },
14  {
15    id: 2,
16    user: { name: "Jane Smith", email: "jane@example.com" },
17    address: { city: "Los Angeles", zip: "90001" }
18  }
19];

💡 Pro Tip: The label property in your column definition is what users see in the header, while accessor is the technical property name used to retrieve data. They can be completely different!

Understanding the Height Prop

The height and maxHeight props determine how Simple Table handles vertical scrolling:

With height: The table has a fixed height and handles scrolling internally. The header stays visible while scrolling through rows.
With maxHeight: Works like height, but the table shrinks if there are fewer rows. Great for adaptive layouts.
Without height: The table expands to show all rows and overflows its parent container. Use this when you want the parent or page to handle scrolling.

For most applications, specifying a height or maxHeight is recommended. Learn more in the Table Height documentation.

Auto-Expanding Columns

By default, Simple Table uses the width values you specify for each column. For tables that should always fill their container width, use the autoExpandColumns prop:

All column widths are automatically scaled proportionally to fill the table container
Your width values serve as the basis for proportional distribution
Perfect for responsive tables that adapt to different screen sizes
Recommended: Disable on mobile devices (< 768px) for better UX

Learn more in the Column Width documentation.

CSS Styles Setup

For Simple Table to function correctly, you need to import the package's CSS styles in your application (don't worry, it's easier than assembling IKEA furniture):

Copy

1// In your JavaScript or TypeScript file
2import "simple-table-core/styles.css";

This import provides all the necessary styling for the table components. Copy-paste this and you're halfway to impressing your boss!

Pro Tip

Simple Table automatically handles the styling of alternating rows, borders, and hover states. You can customize these later with themes, but the defaults look great out of the box!