📊 FlexTable Component

FlexTable is a flexible React + TypeScript table component that supports:
✅ Sorting per column
✅ Simple & complex filtering (nested AND/OR)
✅ Global search
✅ Pagination (client/server mode)
✅ Nested headers
✅ Editable cells
✅ Customizable styles and classes

Perfect for dashboards, reporting tools, or any interactive data table needs.

🚀 Installation

● Prerequisites

This package requires React and the core table libraries as peer dependencies:

npm install react @tanstack/react-table @tanstack/react-virtual

● Installing FlexTable

Install the main FlexTable package:

npm install @package_name/flextable

● Usage Example

Since FlexTable is now an external package, you import it directly using the package name.:

// Import the component directly from the installed package
import FlexTable from "@myorg/flextable";
// Assuming data and props come from elsewhere in your project
import { sampleFlexTableProps } from "./data"; 

function App() {
  return (
    <div style={{ padding: "16px" }}>
      <h1>📊 Manufacturing Dashboard</h1>
      <p>
        Example implementation of <code>FlexTable</code> for displaying factory production data.
      </p>

      <FlexTable
        data={sampleFlexTableProps.data}
        columns={sampleFlexTableProps.columns}
        options={sampleFlexTableProps.options}
        style={sampleFlexTableProps.style}
        position={sampleFlexTableProps.position}
      />
    </div>
  );
}

export default App;

📝 Props Reference

● FlexTableProps

| Prop | Type | Required | Default | Description | |------------|-----------------------------|----------|---------|-----------------------------------------------------------------------------| | data | any[] | ✅ Yes | — | The array of data rows to be displayed in the table. | | columns | FlexTableColumn[] | ✅ Yes | — | Column definitions, including nested headers and column behavior. | | options | FlexTableOptions | ✅ Yes | — | General table configuration (filters, search, footer, pager, etc). | | style | StyleProperties | ✅ Yes | — | Styling configuration (custom CSS classes). | | position | {x?:number,y?:number,width?:number,height?:number} | ❌ No | — | Optional position and dimensions of the table container. |

● FlexTableOptions

| Prop | Type | Required | Default | Description | |----------------|-----------------------|----------|---------|-----------------------------------------------------------------------------| | showFooter | boolean | ❌ No | false | Whether the table footer row should be displayed. | | showFilters | FlexTableInfoConfig | ❌ No | — | Configuration for the column filter row. | | globalSearch | FlexTableInfoConfig | ❌ No | — | Configuration for the global search row. | | infoRowsCount| FlexTableInfoConfig | ❌ No | — | Configuration for the row count indicator row. | | pager | FlexTablePagerOptions| ❌ No | — | Pager (pagination) configuration. |

● FlexTablePagerOptions

| Prop | Type | Required | Default | Description | |-----------------|-----------------------|----------|---------|-----------------------------------------------------------------------------| | infoRow | FlexTableInfoConfig | ❌ No | — | Configuration for the information row displayed inside the pager. | | activePageSize| number | ❌ No | 10 | Current active page size (number of rows per page). | | pageSizes | number[] | ❌ No | [10,20,50,100] | Available page sizes for pagination. | | paginationMode| "server" \| "client"| ❌ No | "client" | Pagination mode: "server" = external handling, "client" = internal. | | totalRows | number | ❌ No | — | Total number of rows (required in "server" mode). |

● StyleProperties

| Prop | Type | Required | Default | Description | |-----------|--------------|----------|---------|-------------------------------------------------| | classes | string[] | ❌ No | — | Array of custom CSS class names for styling. |

● FlexTableInfoConfig

| Prop | Type | Required | Default | Description | |-----------|-----------------------|----------|---------|-----------------------------------------------------------------------------| | visible | boolean | ✅ Yes | false | Whether this special row (filter/search/info) is visible. | | position| "top" \| "bottom" | ✅ Yes | "bottom" | The row position relative to the table. | | order | number | ✅ Yes | 0 | Sort order if multiple rows exist at the same position. |

📦 Sample Data Usage

Check data.ts for sample FlexTableProps:

export const sampleFlexTableProps: FlexTableProps = {
  data: [
        {
      orderId: "ORD-001",
      productName: "Laptop Pro 15",
      category: "Electronics",
      price: 1500,
      stock: true,
      createdAt: "2025-01-10T09:30:00",
    },
    {
      orderId: "ORD-002",
      productName: "Wireless Mouse",
      category: "Accessories",
      price: 45,
      stock: true,
      createdAt: "2025-01-12T14:20:00",
    }
  ], // your dataset
  columns: [
     {
      name: "orderId",
      label: "Order ID",
      dataType: "String",
      canSort: true,
      canFilter: true,
      width: "120px",
    },
    {
      name: "product",
      label: "Product Info",
      dataType: "String",
      subColumns: [
        {
          name: "productName",
          label: "Product Name",
          dataType: "String",
          canSort: true,
          canFilter: true,
          editable: true,
        },
        {
          name: "category",
          label: "Category",
          dataType: "String",
          canSort: true,
          canFilter: true,
        },
      ],
    },
    {
      name: "price",
      label: "Price ($)",
      dataType: "Number",
      canSort: true,
      canFilter: true,
      editable: true,
      width: "100px",
    },
    {
      name: "stock",
      label: "In Stock",
      dataType: "Boolean",
      canFilter: true,
      width: "90px",
    },
    {
      name: "createdAt",
      label: "Created At",
      dataType: "DateTime",
      canSort: true,
      canFilter: true,
      width: "180px",
    },
  ], // your column definitions
  options: {
    globalSearch: { visible: true, position: "top", order: 0 },
    pager: { activePageSize: 10, pageSizes: [10, 20, 50], paginationMode: "client" }
  },
  style: { classes: ["custom-table"] },
};