npm package: @iwanikn/hds-flex-table
Description: `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   ✅ Customiza
Latest version: 1.0.6

# 📊 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:

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

### ● Installing FlexTable
Install the main ```FlexTable``` package:

```tsx
npm install @package_name/flextable
```

### ● Usage Example
Since ```FlexTable``` is now an external package, you import it directly using the package name.:

```tsx
// 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``:
```ts
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"] },
};

```