# SASQTableBody

A component that renders a Multi-Column List (MCL) for displaying tabular data with integrated sorting, row navigation, and infinite scrolling. **SASQTableBody** is designed to work within lookup workflows (like **SASQLookupComponent**) but can be used independently. It handles rendering of data, empty states, and integrates with pagination via a `fetchNextPage` callback.

## Basic Usage

Below is an example demonstrating how to use **SASQTableBody** with required props. Additional props are commented for context:

```jsx
import { useState } from 'react';
import { SASQTableBody } from '@k-int/stripes-kint-components';

const MyTableView = () => {
  const [data] = useState({
    totalRecords: 2,
    results: [
      { id: '1', name: 'Item One', status: 'Active' },
      { id: '2', name: 'Item Two', status: 'Inactive' }
    ]
  });

  const query = { sort: 'name' }; // Used for sorting and empty state messages
  const resultColumns = [
    { propertyPath: 'name', label: 'Name' },
    { propertyPath: 'status', label: 'Status' }
  ];

  const fetchNextPage = ({ pageParam }) => {
    console.log('Fetching page:', pageParam);
    // Implement pagination logic here
  };

  return (
    <SASQTableBody
      data={data}
      query={query}
      path="/my-items" // Base path for row navigation
      resultColumns={resultColumns}
      fetchNextPage={fetchNextPage}
      // mclProps={{ formatter: { name: (item) => <strong>{item.name}</strong> } }}
      // rowNavigation={false}
    />
  );
};

export default MyTableView;
```

### Explanation

- **data:**
  Contains `results` (array of items) and `totalRecords` (total items for pagination).
- **query:**
  Provides current search/sort state. Must include `sort` and `query` if applicable.
- **path:**
  Base URL path for constructing row navigation links (e.g., `/my-items/1`).
- **resultColumns:**
  Defines table columns via `propertyPath` (data key) and `label` (header text).
- **fetchNextPage:**
  Called when more data is needed (e.g., scrolling to the bottom).

## Props

| Prop                | Type                                             | Required | Description                                                                                                                                                                                                                                                                                                                                |
|---------------------|--------------------------------------------------|----------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `data`              | `{ totalRecords: number, results: object[] }`    | ✓        | Data to display. `results` contains the items, `totalRecords` sets pagination bounds.                                                                                                                                                                                                                                                      |
| `error`             | `object`                                         | ✕        | Error object displayed in `NoResultsMessage`.                                                                                                                                                                                                                                                                                              |
| `fetchNextPage`     | `({ pageParam: number }) => void`                | ✓        | Callback to load more data. `pageParam` indicates the next page index.                                                                                                                                                                                                                                                                     |
| `filterPaneVisible` | `boolean`                                        | ✕        | Toggles filter pane visibility in `NoResultsMessage`.                                                                                                                                                                                                                                                                                      |
| `intlKey`           | `string`                                         | ✕        | Base key for internationalizing labels. See `useKintIntl`.                                                                                                                                                                                                                                                                                 |
| `intlNS`            | `string`                                         | ✕        | Namespace for internationalization. See `useKintIntl`.                                                                                                                                                                                                                                                                                     |
| `isError`           | `boolean`                                        | ✕        | Shows error state in `NoResultsMessage`.                                                                                                                                                                                                                                                                                                   |
| `isLoading`         | `boolean`                                        | ✕        | Shows loading state in `NoResultsMessage`.                                                                                                                                                                                                                                                                                                 |
| `labelOverrides`    | `object`                                         | ✕        | Overrides default labels (e.g., `{ noResultsFound: 'No items' }`).                                                                                                                                                                                                                                                                         |
| `match`             | `object`                                         | ✕        | React Router `match` object. Used to highlight the selected row via URL `id` param.                                                                                                                                                                                                                                                        |
| `mclProps`          | `object`                                         | ✕        | Props passed to the underlying [MultiColumnList](https://github.com/folio-org/stripes-components/tree/master/lib/MultiColumnList). Example: `formatter`, `id`.                                                                                                                                                                             |
| `noResultsProps`    | `object`                                         | ✕        | Props to be passed down to the [NoResultsMessage](https://gitlab.com/knowledge-integration/folio/stripes-kint-components/-/tree/main/src/lib/NoResultsMessage) splash screen component rendered when no results are present from the query. If `component` is passed, this will be rendered with the props available to `NoResultsMessage` |
| `path`              | `string`                                         | ✓        | Base path for row URLs. Each row links to `{path}/{rowData.id}`.                                                                                                                                                                                                                                                                           |
| `query`             | `object`                                         | ✓        | Current query state (e.g., `{ sort: 'name', query: 'search term' }`). Used for sorting and empty state messages.                                                                                                                                                                                                                           |
| `resultColumns`     | `Array<{ propertyPath: string, label: string }>` | ✓        | Columns to render. `propertyPath` accesses the data field, `label` sets the header.                                                                                                                                                                                                                                                        |
| `rowNavigation`     | `boolean`                                        | ✕        | Enables navigation to detail views on row click. Default: `true`.                                                                                                                                                                                                                                                                          |
| `toggleFilterPane`  | `() => void`                                     | ✕        | Callback to toggle filter pane. Used in `NoResultsMessage`.                                                                                                                                                                                                                                                                                |
| `getNavigationIdentifier`  | `(row: object) => string \| number`                                     | ✕        | When row navigation is enabled, this function parses the row data to find the unique identitifer for URL routing. Defaults to `(row) => row.id`.                                                                                                                                                                      |

## Key Features

1. **Row Navigation:**
When `rowNavigation={true}` (default), clicking a row navigates to `{path}/{getNavigationIdentifier(row)}` (Default is `row.id`). Uses `react-router` internally.

2. **Sorting:**
   Column headers trigger `onSort`, updating the `query.sort` value. The current sort is derived from `query.sort`.

3. **Infinite Scroll:**
   `fetchNextPage` is called automatically as the user scrolls. Can alternatively use with pagination logic (e.g., `usePrevNextPagination` props passed to mclProps).

4. **Custom Formatters:**
   Pass a `formatter` in `mclProps` to customize cell rendering. Each formatter receives the row data and a `defaultRowUrl`:
   ```jsx
   mclProps={{
     formatter: {
       name: (item) => <Link to={item.defaultRowUrl}>{item.name}</Link>
     }
   }}
   ```

5. **Empty States:**
   `NoResultsMessage` handles loading, errors, and no-results states.

## Integration Notes

- **Parent Components:**
  Designed to work within **SASQLookupComponent** (as its default `RenderBody`), but can be used standalone.

- **Routing:**
  Must be rendered within a `react-router` context for navigation to work.