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 prop determines 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.
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 is recommended. Learn more in the Table Height 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!