outrun-smart-table

A reusable React component library for displaying and managing tabular data with advanced features like filtering, sorting, and CRUD operations, built with Material-UI (MUI).

Overview

outrun-smart-table provides a SmartTable component designed to display data in a table format with support for:

• CRUD Operations: Insert, update, delete, and copy records with modal dialogs.
• Filtering and Sorting: Filter data by fields and sort columns dynamically.
• Editable Cells: Inline editing for specific fields.
• Exporting: Export table data to CSV.
• Theming: Integrates with MUI themes for styling, respecting the consuming app's palette.

This package is ideal for applications needing a feature-rich table component with seamless integration into MUI-based projects.

Installation

Prerequisites

Ensure your project has the following peer dependencies installed:

• react: "^18.0.0"
• react-dom: "^18.0.0"
• @mui/material: "^5.0.0"
• @mui/icons-material: "^5.0.0"
• react-router-dom: "^6.0.0"
• prop-types: "^15.0.0"

Additional MUI-related peer dependencies are required (see package.json for the full list).

Install the Package

You can install outrun-smart-table via npm:

npm install outrun-smart-table --legacy-peer-deps

Note: Use --legacy-peer-deps to avoid installing peer dependencies locally in the package, as they should be provided by the consuming app.

Project Setup

Ensure your app is wrapped with MUI's ThemeProvider and react-router-dom's BrowserRouter to provide theme context and routing capabilities:

import React from 'react';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

const theme = createTheme({
  palette: {
    primary: {
      blue300: '#d3ffce', // Example color
    },
  },
});

function Main() {
  return (
    <ThemeProvider theme={theme}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </ThemeProvider>
  );
}

export default Main;

Usage

Basic Example

Import and use the SmartTable component in your app:

import React from 'react';
import { SmartTable } from 'outrun-smart-table';

function ActiveGoals() {
  const columns = [
    { field: 'id', headerName: 'ID', width: 100 },
    { field: 'name', headerName: 'Name', width: 200 },
  ];
  const rows = [
    { _id: '1', id: 1, name: 'Test User' },
  ];

  const handleAction = (action) => {
    console.log('Action triggered:', action);
  };

  return (
    <SmartTable
      collectionName="users"
      collectionTitle="Users"
      data={rows}
      fields={[
        { name: 'id', type: 'number', required: true, width: 100 },
        { name: 'name', type: 'text', required: true, width: 200 },
      ]}
      headers={columns}
      actions={['Insert', 'Delete']}
      onAction={handleAction}
      statusButtons={{
        copyDisabled: false,
        deleteDisabled: false,
        editDisabled: false,
        insertDisabled: false,
      }}
    />
  );
}

export default ActiveGoals;

Props

| Prop | Type | Description | Required | Default | |-------------------|--------------|-----------------------------------------------------------------------------|----------|---------------| | data | Array | Array of row data to display in the table. Each row must have a unique _id. | Yes | N/A | | fields | Array | Array of field definitions (e.g., { name: 'id', type: 'number', required: true, width: 100 }). | Yes | N/A | | headers | Array | Array of header definitions (e.g., { field: 'id', headerName: 'ID', width: 100 }). | Yes | N/A | | actions | Array | List of actions to display (e.g., ['Insert', 'Delete', 'Export']). | No | [] | | collectionName | String | Name of the data collection (used for modals and exports). | No | '' | | collectionTitle | String | Display title for the collection (used in modals). | No | '' | | containerStyle | Object | Custom styles for the table container. | No | {} | | csvFileName | String | Filename for CSV exports. | No | '' | | defaultValues | Object | Default values for new records during Insert. | No | {} | | deleteInfo | Array | Fields to display in delete confirmation (e.g., ['name']). | No | [] | | editable | Boolean | Enable inline editing of cells. | No | false | | layout | String | Modal layout ('horizontal' or 'vertical'). | No | 'horizontal'| | rowColorFunction| Function | Function to determine row background color based on row data. | No | undefined | | selectOptions | Object | Options for select fields (e.g., { roles: ['Admin', 'User'] }). | No | {} | | onAction | Function | Callback for actions (e.g., (action) => console.log(action)). | No | () => null | | onSelectionChange| Function | Callback for selection changes in modals. | No | undefined | | onSelected | Function | Callback when a row is selected. | No | () => null |

Features

• Filtering: Click column headers to filter data with a modal.
• Sorting: Sort columns by clicking headers.
• CRUD Modals: Insert, update, delete, and copy records using modal dialogs.
• Export to CSV: Export table data to a CSV file.
• Theming: Uses the consuming app’s MUI theme (e.g., theme.palette.primary.blue300 for styling).

Development

Project Structure

• src/index.js: Entry point exporting the SmartTable component.
• src/SmartTable/SmartTable.js: Main table component.
• src/SmartTable/Actions.js: Renders action buttons (Insert, Delete, etc.).
• src/SmartTable/BodyRows.js: Renders table rows.
• src/SmartTable/HeaderRow.js: Renders table headers with sorting/filtering.
• src/SmartTable/ModalInsert.js, ModalDelete.js, etc.: Modal dialogs for CRUD operations.

Building the Package

To build the package for distribution:

npm run build

This uses Rollup to bundle the library into dist/index.js.

Testing Locally

Link the package to your app for testing:

cd /path/to/outrun-smart-table
npm link

cd /path/to/your-app
npm link outrun-smart-table

Troubleshooting

"theme is not defined" Error

Ensure your app is wrapped with ThemeProvider from @mui/material/styles. If using useTheme, verify the component is inside the ThemeProvider hierarchy.

"type is invalid" Warning

Check that all subcomponents (e.g., ModalInsert, Actions) are correctly exported as default exports in their files.

Missing Dependencies

Verify all peer dependencies are installed in your app. Run:

npm ls react react-dom @mui/material @mui/icons-material react-router-dom prop-types

Contributing

Contributions are welcome! Please submit a pull request or open an issue on the repository.

License

MIT License. See LICENSE for details.