Dynamic Data

Rowstack isn't just a viewer; it's a dynamic data editor. Users can add and remove rows and columns directly from the interface.

#Adding Rows

Users can add new records to the dataset using the "New Row" functionality.

#Configuration

You can control where the "New Row" button appears:

const config = {
  addRow: {
    enabled: true,
    body: true,    // Show "+" button at the bottom of the table body
    toolbar: true  // Show "New Row" button in the toolbar
  }
};

#Managing Columns

Rowstack allows users to extend or modify the table schema on the fly.

#Adding Columns

Users can click the + button at the end of the table header to create a new column. They can then specify the name and Cell Type.

const config = {
  addColumn: {
    enabled: true
  }
};

#Deleting Columns

Columns can be removed by users (typically via the header popup menu), allowing for temporary or permanent view modifications.

const config = {
  deleteColumns: {
    enabled: true
  }
};

#Editing Column Meta

Users can rename columns or change their data types via the Column Management UI.

const config = {
  editColumns: {
    enabled: true
  }
};

#Handling Changes

All dynamic changes to the rows and columns are passed back to your application via the onChange callback.

<Table
  data={data}
  columns={columns}
  onChange={(newState) => {
    // newState.data contains updated rows
    // newState.columns contains updated column definitions
  }}
/>