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. Can be any valid CSS height value.
`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.

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!