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.
`rowIdAccessor` Accessor	Required	The property name that uniquely identifies each row. This is crucial for proper row tracking, selection, and updates. Without this, the table cannot maintain state correctly.
`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 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!