Blackcat UI Table

This repo contains classes and components used for implementing UI tables.

Architectural Overview

This table contrasts with our past efforts in how we separate the business of data management from data rendering, and this approach has greatly simplified both the implementation and usage of the table.

All responsibilities relating to display (including localization and formatting) are handled here in the table itself, where we have access to our I18n and theme contexts.

Data handling is confined to the DataSource interface (discussed in more detail below).

We have thus eliminated all of the entanglement between presentation and data handling.

Components

This package provides several components that can be used together or independently:

- Table: The main table component that renders the data
- TableColumn: Configures how each column is displayed
- TableSearch: Runs a global search on the given data source
- TablePager: Pagination controls for the data source

The components are designed to work independently from each other, but may consume a common DataSource, allowing you to:
- Use them together for a complete table experience
- Implement your own header/footer components
- Customize the layout and styling

In other words, if you pass the Table and TablePager the same DataStore instance, the paging controls in the footer will affect the Table.

$3

The core component that renders the actual table (as a semantic HTML

element). It handles:
- Column configuration
- Data rendering
- Sorting
- Sticky columns
- Row highlighting

Data Source

The Table components (except the TableColumn) require a DataSource which manages:
- Data fetching and updates
- Sorting
- Filtering
- Pagination

The DataSource interface and implementations are found in a separate ResourceStore module.

$3

1. StaticDataSource: For working with static data
2. AIPDataSource: For working with AIP-compliant REST resources

Column Configuration

The Table is configured with TableColumn components that describe:
- Column position
- Header content
- Footer content
- Sorting behavior
- Cell rendering
- Sticky positioning
- Width

$3

``tsx
const s = useStringTranslation();


heading={s("Name")}
fieldName="name"
/>

`

$3

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| heading | ReactNode | Yes | Content to display in the column header |
| footer | ReactNode | No | Content to display in the column footer |
| fieldName | string | No* | Name of the field in the data source |
| canSort | boolean | No | Whether the column can be sorted |
| render | (item: T) => ReactNode | No | Custom render function for cell content |
| sticky | "start" \| "end" | No | Makes the column stick to the start or end |
| width | number | No | Column width in pixels |

\* Required if canSort is true

$3

You can customize how cells are rendered using the render prop:

`tsx
const d = useDateTranslation();
const s = useStringTranslation();


heading={s("Birthdate")}
fieldName="birthdate"
render={(item) => d(item.birthdate)}
/>

`

$3

Columns that don't represent data (like action buttons):

`tsx



heading={s("Actions")}
render={(item) => (
myDomain.edit(item)}>
{s("Edit")}

)}
sticky="end"
/>

``

Styling

The table components use CSS modules for styling. You can:
- Override default styles using CSS modules
- Use the provided CSS variables for consistent theming
- Add custom classes to individual components