Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 14 additions & 1 deletion .github/workflows/validate-readme.yml
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,29 @@ on:
pull_request:
paths:
- README.md
- src/components/*/README.md
- src/hooks/*/README.md

permissions:
contents: read
pull-requests: write

jobs:
validate:
validate-package:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: gravity-ui/readme-validator@v1
with:
type: package

validate-components:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: gravity-ui/readme-validator@v1
with:
type: component
paths: |
src/components/*/README.md
src/hooks/*/README.md
26 changes: 15 additions & 11 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,14 +39,14 @@ const BasicExample = () => {
};
```

## Components
### Components

There are two Table components that you can use:

- `BaseTable` - a component with basic styles only;
- `Table` - a component with Gravity UI based styles.

### Row selection
#### Row selection

```tsx
import {selectionColumn} from '@gravity-ui/table';
Expand Down Expand Up @@ -81,7 +81,7 @@ const RowSelectionExample = () => {

To use grouping with selection, use `useRowSelectionFixedHandler` hook. Without it parent row checkbox state will be wrong. https://github.com/TanStack/table/issues/4878

### Custom Ranged Selection Column
#### Custom Ranged Selection Column

The `useToggleRangeSelectionHandler` hook returns a change handler that listens for Shift+click events and performs ranged row selection. It needs to be passed a `CellContext` instance in order to have access to the table's and row's internal states.

Expand Down Expand Up @@ -212,7 +212,7 @@ const columns: ColumnDef<Person>[] = [

**Note**: If the table contains nested rows, range selection will not work. At the moment, this is considered undefined behavior.

### Sorting
#### Sorting

Learn about the column properties in the react-table [docs](https://tanstack.com/table/v8/docs/guide/sorting)

Expand Down Expand Up @@ -256,7 +256,7 @@ const table = useTable({
});
```

### Grouping
#### Grouping

```tsx
import type {ExpandedState, Row} from '@gravity-ui/table/tanstack';
Expand Down Expand Up @@ -345,7 +345,7 @@ const columns: ColumnDef<Item>[] = [
];
```

### Reordering
#### Reordering

```tsx
import type {ReorderingProviderProps} from '@gravity-ui/table';
Expand Down Expand Up @@ -392,7 +392,7 @@ const ReorderingExample = () => {
};
```

### Column reordering
#### Column reordering

Wrap the table with `ColumnReorderingProvider` to enable drag-and-drop reordering of columns by their headers.

Expand Down Expand Up @@ -488,7 +488,7 @@ While dragging:
</ColumnReorderingProvider>
```

### Virtualization
#### Virtualization

Use if you want to use grid container as the scroll element (if you want to use window see window virtualization section). Be sure to set a fixed height on the container; otherwise, virtualization will not work.

Expand Down Expand Up @@ -551,7 +551,7 @@ return (
);
```

### Window virtualization
#### Window virtualization

Use if you want to use window as the scroll element

Expand Down Expand Up @@ -586,7 +586,7 @@ const WindowVirtualizationExample = () => {
};
```

### Resizing
#### Resizing

```tsx
const columns: ColumnDef<Person>[] = [
Expand All @@ -609,7 +609,7 @@ const ResizingDemo = () => {
};
```

### Column settings
#### Column settings

```tsx
const columns: ColumnDef<Person>[] = [
Expand Down Expand Up @@ -739,3 +739,7 @@ A headless, TanStack-Table-powered data grid for Gravity UI apps — reach for i
- **Sorting needs an accessor.** A column must have `accessorKey`/`accessorFn` for sorting to work; set `enableSorting` and provide `getRowId`.
- **React 19 + React Compiler can skip re-renders.** This is an upstream TanStack Table issue — add the `'use no memo'` directive to the component or memoize `data`.
- **Range selection breaks with nested rows.** Ranged selection is undefined behavior when the table has grouped/nested rows; use `useRowSelectionFixedHandler` for correct parent-checkbox state with grouping.

## Documentation for AI agents

Agent-readable documentation for the installed version is located in `node_modules/@gravity-ui/table/build/docs/INDEX.md`.
6 changes: 6 additions & 0 deletions gulpfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -88,13 +88,19 @@ task('styles-components', () => {
.pipe(dest(path.resolve(BUILD_DIR, 'cjs', 'components')));
});

task('copy-docs', (done) => {
utils.buildDocs();
done();
});

task(
'build',
series([
'clean',
parallel(['compile-to-esm', 'compile-to-cjs']),
'copy-i18n',
parallel(['styles-components']),
'copy-docs',
]),
);

Expand Down
Loading
Loading