### Install Dependencies and Start Development Server

Source: https://github.com/autodesk/react-base-table/blob/master/README.md

Install project dependencies using Yarn, including specific commands for the website directory, and then start the development server.

```bash
yarn install --ignore-scripts
cd website && yarn install
cd ..
yarn start
```

--------------------------------

### Start Development Server

Source: https://github.com/autodesk/react-base-table/blob/master/website/README.md

Start the development server to enable hot reloading. Visit http://localhost:8000 after the server starts.

```bash
yarn start
```

--------------------------------

### Basic Table Setup with Columns

Source: https://context7.com/autodesk/react-base-table/llms.txt

Minimal table setup using the `data` prop, explicit `width` and `height`, and `Column` children. Ensure you import the default styles.

```tsx
import BaseTable, { Column } from 'react-base-table'
import 'react-base-table/dist/styles.css'

const data = [
  { id: '1', name: 'Alice', age: 30, city: 'New York' },
  { id: '2', name: 'Bob',   age: 25, city: 'London' },
  { id: '3', name: 'Carol', age: 35, city: 'Tokyo' },
]

export default function App() {
  return (
    <BaseTable data={data} width={600} height={300} rowKey="id">
      <Column key="name"  title="Name" dataKey="name" width={150} />
      <Column key="age"   title="Age"  dataKey="age"  width={100} align="right" />
      <Column key="city"  title="City" dataKey="city" width={150} />
    </BaseTable>
  )
}
```

--------------------------------

### Clone and Install Dependencies

Source: https://github.com/autodesk/react-base-table/blob/master/website/README.md

Clone the repository and install project dependencies using Yarn. Use npm install if Yarn is not available.

```bash
git clone https://github.com/Autodesk/react-base-table.git
cd react-base-table
cd website
yarn # install dependencies
```

--------------------------------

### Implement Inline Editing with React Overlays

Source: https://github.com/autodesk/react-base-table/blob/master/docs/inline-editing.md

This example demonstrates how to create an editable cell using react-overlays and Popper.js. It handles the editing state and uses a Select component for editing. Ensure react-overlays is installed.

```jsx
// import { Overlay } from 'react-overlays'
const { Overlay } = ReactOverlays;

const CellContainer = styled.div`
  display: flex;
  flex: 1 0 100%;
  align-items: center;
  height: 100%;
  overflow: hidden;
  margin: 0 -5px;
  padding: 5px;
  border: 1px dashed transparent;
`;

const GlobalStyle = createGlobalStyle`
  .BaseTable__row:hover,
  .BaseTable__row--hover {
    ${CellContainer} {
      border: 1px dashed #ccc;
    }
  }
`;

const Select = styled.select`
  width: 100%;
  height: 30px;
  margin-top: 10px;
`;

class EditableCell extends React.PureComponent {
  state = {
    value: this.props.cellData,
    editing: false,
  };

  setTargetRef = ref => (this.targetRef = ref);

  getTargetRef = () => this.targetRef;

  handleClick = () => this.setState({ editing: true });

  handleHide = () => this.setState({ editing: false });

  handleChange = e =>
    this.setState({
      value: e.target.value,
      editing: false,
    });

  render() {
    const { container, rowIndex, columnIndex } = this.props;
    const { value, editing } = this.state;

    return (
      <CellContainer ref={this.setTargetRef} onClick={this.handleClick}>
        {!editing && value}
        {editing && this.targetRef && (
          <Overlay show flip rootClose container={container} target={this.getTargetRef} onHide={this.handleHide}>
            {({ props, placement }) => (
              <div
                {...props}
                style={{ 
                  ...props.style,
                  width: this.targetRef.offsetWidth,
                  top: placement === 'top' ? this.targetRef.offsetHeight : -this.targetRef.offsetHeight,
                }}
              >
                <Select value={value} onChange={this.handleChange}>
                  <option value="grapefruit">Grapefruit</option>
                  <option value="lime">Lime</option>
                  <option value="coconut">Coconut</option>
                  <option value="mango">Mango</option>
                </Select>
              </div>
            )}
          </Overlay>
        )}
      </CellContainer>
    );
  }
}

const columns = generateColumns(5);
const data = generateData(columns, 100);

columns[0].cellRenderer = EditableCell;
columns[0].width = 300;

export default () => (
  <>
    <GlobalStyle />
    <Table fixed columns={columns} data={data} />
  </>
);

```

--------------------------------

### Install React Base Table with npm or yarn

Source: https://github.com/autodesk/react-base-table/blob/master/docs/get-started.md

Use npm or yarn to add the react-base-table package to your project dependencies.

```bash
# npm
npm install react-base-table --save

# yarn
yarn add react-base-table
```

--------------------------------

### Implement Row Selection with Checkbox Column

Source: https://context7.com/autodesk/react-base-table/llms.txt

This example demonstrates how to add a custom checkbox column to BaseTable for row selection. It manages selected row keys using React state and applies a CSS class to visually highlight selected rows. Ensure you have `FrozenDirection` imported if using frozen columns.

```tsx
function SelectableTable({ data }) {
  const [selectedKeys, setSelectedKeys] = React.useState<string[]>([])

  const handleSelectChange = ({ selected, rowData }) => {
    setSelectedKeys(prev =>
      selected
        ? [...prev, rowData.id]
        : prev.filter(k => k !== rowData.id)
    )
  }

  const selectionColumn = {
    key: '__selection__',
    width: 40,
    flexShrink: 0,
    frozen: FrozenDirection.LEFT,
    cellRenderer: ({ rowData }) => (
      <input
        type="checkbox"
        checked={selectedKeys.includes(rowData.id)}
        onChange={e => handleSelectChange({ selected: e.target.checked, rowData })}
      />
    ),
  }

  return (
    <BaseTable
      fixed
      data={data}
      width={700}
      height={400}
      rowKey="id"
      columns={[selectionColumn, ...dataColumns]}
      rowClassName={({ rowData }) =>
        selectedKeys.includes(rowData.id) ? 'row-selected' : ''
      }
    />
  )
}
```

--------------------------------

### Using Frozen Data for Pinned Rows

Source: https://context7.com/autodesk/react-base-table/llms.txt

Display pinned rows at the top of the table body using the `frozenData` prop. Frozen row indices are negative, starting at -1.

```tsx
const pinnedRows = [{ id: 'total', name: 'TOTAL', score: 9999 }]
const scrollableRows = Array.from({ length: 500 }, (_, i) => ({
  id: String(i),
  name: `Row ${i}`,
  score: Math.floor(Math.random() * 100),
}))

<BaseTable
  width={700}
  height={400}
  rowKey="id"
  data={scrollableRows}
  frozenData={pinnedRows}   // always visible at the top of the body
>
  <Column key="name"  title="Name"  dataKey="name"  width={200} />
  <Column key="score" title="Score" dataKey="score" width={100} align="right" />
</BaseTable>
```

--------------------------------

### Enable Column Resizing with `resizable`, `minWidth`, `maxWidth`

Source: https://context7.com/autodesk/react-base-table/llms.txt

Set `resizable: true` on columns to allow users to drag and resize them. Use `onColumnResize` for live updates and `onColumnResizeEnd` to persist the final width. `minWidth` and `maxWidth` can constrain the resizeable range.

```tsx
const [columns, setColumns] = React.useState([
  { key: 'name',  title: 'Name',  dataKey: 'name',  width: 200, resizable: true, minWidth: 80, maxWidth: 400 },
  { key: 'email', title: 'Email', dataKey: 'email', width: 250, resizable: true, minWidth: 100 },
  { key: 'age',   title: 'Age',   dataKey: 'age',   width: 80 },
])

<BaseTable
  fixed
  data={rows}
  width={700}
  height={400}
  rowKey="id"
  columns={columns}
  onColumnResizeEnd={({ column, width }) => {
    setColumns(cols =>
      cols.map(c => c.key === column.key ? { ...c, width } : c)
    )
  }}
/>
```

--------------------------------

### Deploy Changes

Source: https://github.com/autodesk/react-base-table/blob/master/website/README.md

Deploy your changes to Github Pages using the deploy script. This will automatically deploy your updated website.

```bash
yarn deploy
```

--------------------------------

### Basic Usage of React Base Table

Source: https://github.com/autodesk/react-base-table/blob/master/docs/get-started.md

Import the BaseTable component and its Column definition, along with the necessary CSS. Define columns with unique keys and data keys, and provide data to the table. Ensure 'width' and 'height' props are set for proper rendering.

```tsx
import BaseTable, { Column } from 'react-base-table'
import 'react-base-table/dist/styles.css'

<BaseTable data={data} width={600} height={400}>
  <Column key="col0" dataKey="col0" width={100} />
  <Column key="col1" dataKey="col1" width={100} />
  ...
</BaseTable>
```

--------------------------------

### Defining Columns with `columns` Prop

Source: https://context7.com/autodesk/react-base-table/llms.txt

Define columns using a `columns` array prop for memoization benefits, especially when the column configuration is static or changes infrequently. Ensure `ColumnShape` is imported.

```tsx
import BaseTable, { Column, type ColumnShape } from 'react-base-table'

const columns: ColumnShape[] = [
  { key: 'name',  title: 'Name',  dataKey: 'name',  width: 200 },
  { key: 'email', title: 'Email', dataKey: 'email', width: 250 },
  { key: 'role',  title: 'Role',  dataKey: 'role',  width: 120 },
]

<BaseTable data={rows} width={700} height={400} rowKey="id" columns={columns} />
```

--------------------------------

### Responsive Table with AutoResizer

Source: https://github.com/autodesk/react-base-table/blob/master/docs/get-started.md

Utilize the AutoResizer component to make the table fill its container, enabling responsive behavior. This is useful for adapting the table to different screen sizes.

```jsx
const columns = generateColumns(10);
const data = generateData(columns, 200);

export default () => <Table columns={columns} data={data} />;
```

--------------------------------

### Handle Scroll Events with `onScroll`, `onRowsRendered`, `onScrollbarPresenceChange`

Source: https://context7.com/autodesk/react-base-table/llms.txt

These callbacks provide information about scroll position, visible rows, and scrollbar state. Use `onScroll` for general scroll events, `onRowsRendered` to track visible rows for prefetching, and `onScrollbarPresenceChange` to adjust layout when scrollbars appear or disappear.

```tsx
<BaseTable
  data={rows}
  width={700}
  height={400}
  rowKey="id"
  onScroll={({ scrollLeft, scrollTop, verticalScrollDirection }) => {
    console.log(`Scrolled to (${scrollLeft}, ${scrollTop}), direction: ${verticalScrollDirection}`)
  }}
  onRowsRendered={({ startIndex, stopIndex, overscanStartIndex, overscanStopIndex }) => {
    // Track which rows are in the visible viewport
    prefetchData(startIndex, stopIndex)
  }}
  onScrollbarPresenceChange={({ horizontal, vertical, size }) => {
    // Adjust surrounding layout when scrollbars appear/disappear
    setHasHorizontalScroll(horizontal)
  }}
>
  <Column key="name" title="Name" dataKey="name" width={200} />
</BaseTable>
```

--------------------------------

### Implement Multi-Column Sort with `sortState`

Source: https://context7.com/autodesk/react-base-table/llms.txt

Use `sortState` (a `Record<string, SortOrderValue>`) for multi-column sorting. Handle the `onColumnSort` event to update the `sortState`, allowing columns to be toggled on/off or have their order changed.

```tsx
import { SortOrder, type SortState } from 'react-base-table'

function MultiSortTable() {
  const [sortState, setSortState] = React.useState<SortState>({
    'name':  SortOrder.ASC,
    'score': SortOrder.DESC,
  })

  const handleSort = ({ key, order }: { key: string; order: string }) => {
    setSortState(prev => ({
      ...prev,
      // Toggle off (remove) if already DESC, otherwise apply the new order
      [key]: prev[key] === SortOrder.DESC ? undefined : order,
    }))
  }

  return (
    <BaseTable
      fixed
      data={rows}
      width={700}
      height={400}
      rowKey="id"
      sortState={sortState}
      onColumnSort={handleSort}
    >
      <Column key="name"  title="Name"  dataKey="name"  width={200} sortable />
      <Column key="score" title="Score" dataKey="score" width={100} sortable />
      <Column key="city"  title="City"  dataKey="city"  width={150} sortable />
    </BaseTable>
  )
}

```

--------------------------------

### Imperative Methods (via `ref`)

Source: https://context7.com/autodesk/react-base-table/llms.txt

Access internal scroll and state methods using a React ref to control table behavior programmatically.

```APIDOC
## Imperative Methods (via `ref`)

Access internal scroll and state methods using a React ref.

```tsx
import BaseTable, { Column, type BaseTableProps } from 'react-base-table'

function ScrollableTable() {
  const tableRef = React.useRef<BaseTable>(null)

  return (
    <>
      <div style={{ display: 'flex', gap: 8, marginBottom: 8 }}>
        <button onClick={() => tableRef.current?.scrollToRow(0, 'start')}>
          Top
        </button>
        <button onClick={() => tableRef.current?.scrollToRow(99, 'center')}>
          Row 100
        </button>
        <button onClick={() => tableRef.current?.scrollToTop(500)}>
          Y=500
        </button>
        <button onClick={() => tableRef.current?.scrollToLeft(200)}>
          X=200
        </button>
        <button onClick={() => tableRef.current?.scrollToPosition({ scrollLeft: 100, scrollTop: 1000 })}>
          Position
        </button>
      </div>
      <BaseTable
        ref={tableRef}
        data={rows}
        width={700}
        height={400}
        fixed
        rowKey="id"
      >
        <Column key="name"  title="Name"  dataKey="name"  width={200} />
        <Column key="email" title="Email" dataKey="email" width={300} />
      </BaseTable>
    </>
  )
}
```

### Methods

| Method | Signature | Description |
|---|---|---|
| `scrollToRow` | `(rowIndex: number, align?: 'auto'|'start'|'center'|'end')` | Scroll to a row by index |
| `scrollToTop` | `(scrollTop: number)` | Scroll to a vertical offset |
| `scrollToLeft` | `(scrollLeft: number)` | Scroll to a horizontal offset |
| `scrollToPosition` | `({ scrollLeft, scrollTop })` | Scroll to exact position |
| `setExpandedRowKeys` | `(keys: RowKey[])` | Programmatically set expanded rows (uncontrolled only) |
| `resetAfterRowIndex` | `(rowIndex: number, shouldForceUpdate?: boolean)` | Reset cached row heights after a given index |
| `resetRowHeightCache` | `()` | Clear all dynamic row height caches |
| `getTotalRowsHeight` | `() => number` | Get the total height of all rendered rows |
| `getTotalColumnsWidth` | `() => number` | Get the total width of all columns |
| `getDOMNode` | `() => HTMLDivElement | null` | Get the root DOM element |
| `getExpandedRowKeys` | `() => RowKey[]` | Get the current expanded row keys |
| `forceUpdateTable` | `()` | Force re-render the underlying Grid |
```

--------------------------------

### Configuring Row Height with `rowHeight` or `estimatedRowHeight`

Source: https://context7.com/autodesk/react-base-table/llms.txt

Define row heights using a fixed `rowHeight` for uniform rows or `estimatedRowHeight` for dynamic content. The latter measures actual row heights at render time.

```tsx
// Fixed height rows
<BaseTable data={rows} width={700} height={400} rowKey="id" rowHeight={40}>
  ...
</BaseTable>

// Dynamic heights — provide an estimate; actual height is measured at render time
<BaseTable
  data={rows}
  width={700}
  height={400}
  rowKey="id"
  estimatedRowHeight={({ rowData, rowIndex }) => {
    // rows with long descriptions get more estimated space
    return rowData.description?.length > 100 ? 80 : 40
  }}
>
  <Column key="description" title="Description" dataKey="description" width={400} />
</BaseTable>
```

--------------------------------

### Implement Single-Column Sort with `sortable`

Source: https://context7.com/autodesk/react-base-table/llms.txt

Mark columns as `sortable`. Manage the `sortBy` state and handle the `onColumnSort` event to re-sort the table data. Ensure `fixed` mode is enabled for the table.

```tsx
import BaseTable, { Column, SortOrder, type SortByShape } from 'react-base-table'

function SortableTable() {
  const [sortBy, setSortBy] = React.useState<SortByShape>({ key: 'name', order: SortOrder.ASC })
  const [data, setData] = React.useState(rows)

  const handleSort = ({ key, order }: { key: string; order: string }) => {
    const multiplier = order === SortOrder.ASC ? 1 : -1
    const sorted = [...data].sort((a, b) =>
      a[key] > b[key] ? multiplier : -multiplier
    )
    setSortBy({ key, order })
    setData(sorted)
  }

  return (
    <BaseTable
      fixed
      data={data}
      width={700}
      height={400}
      rowKey="id"
      sortBy={sortBy}
      onColumnSort={handleSort}
    >
      <Column key="name"  title="Name"  dataKey="name"  width={200} sortable />
      <Column key="email" title="Email" dataKey="email" width={250} sortable />
      <Column key="age"   title="Age"   dataKey="age"   width={80}  sortable />
    </BaseTable>
  )
}

```

--------------------------------

### Custom Cell and Header Rendering

Source: https://context7.com/autodesk/react-base-table/llms.txt

Implement custom rendering for cells and headers using `cellRenderer` and `headerRenderer` props. Ensure correct types (`CellRendererProps`, `HeaderRendererProps`) are imported for type safety.

```tsx
import { type CellRendererProps, type HeaderRendererProps } from 'react-base-table'

const StatusCell = ({ cellData }: CellRendererProps) => (
  <span style={{ color: cellData === 'active' ? 'green' : 'red', fontWeight: 'bold' }}>
    {cellData.toUpperCase()}
  </span>
)

const SortableHeader = ({ column }: HeaderRendererProps) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
    <span>{column.title}</span>
    <span style={{ fontSize: 10 }}>⇅</span>
  </div>
)

<BaseTable data={rows} width={700} height={400} rowKey="id">
  <Column key="name"   title="Name"   dataKey="name"   width={200} />
  <Column
    key="status"
    title="Status"
    dataKey="status"
    width={120}
    cellRenderer={StatusCell}
    headerRenderer={SortableHeader}
  />
</BaseTable>
```

--------------------------------

### Implement Infinite Scrolling with `onEndReached`

Source: https://context7.com/autodesk/react-base-table/llms.txt

Use the `onEndReached` prop to load more data when the user scrolls near the bottom of the table. Set `onEndReachedThreshold` to define the distance from the bottom that triggers the event. The `loading` and `allLoaded` states help manage data fetching.

```tsx
function InfiniteTable() {
  const [data, setData] = React.useState(initialPage)
  const [loading, setLoading] = React.useState(false)
  const [allLoaded, setAllLoaded] = React.useState(false)

  const handleEndReached = async ({ distanceFromEnd }) => {
    if (loading || allLoaded) return
    setLoading(true)
    const nextPage = await fetchNextPage(data.length)
    if (nextPage.length === 0) {
      setAllLoaded(true)
    } else {
      setData(prev => [...prev, ...nextPage])
    }
    setLoading(false)
  }

  return (
    <BaseTable
      fixed
      data={data}
      width={700}
      height={500}
      rowKey="id"
      onEndReachedThreshold={300}   // pixels from bottom to trigger
      onEndReached={handleEndReached}
      overlayRenderer={loading ? () => <LoadingOverlay /> : undefined}
    >
      <Column key="name"  title="Name"  dataKey="name"  width={200} />
      <Column key="email" title="Email" dataKey="email" width={300} />
    </BaseTable>
  )
}
```

--------------------------------

### Configuring Table Height with `height` or `maxHeight`

Source: https://context7.com/autodesk/react-base-table/llms.txt

Set the table's vertical scroll behavior using either a fixed `height` or a `maxHeight`. `maxHeight` allows the table to grow until it reaches the specified limit.

```tsx
// Fixed height — vertical scrollbar appears when rows exceed 400px
<BaseTable data={rows} width={700} height={400} rowKey="id">
  ...
</BaseTable>

// Max height — table expands until 500px then starts scrolling
<BaseTable data={rows} width={700} maxHeight={500} rowKey="id">
  ...
</BaseTable>
```

--------------------------------

### `Column.Alignment` and `Column.FrozenDirection`

Source: https://context7.com/autodesk/react-base-table/llms.txt

Constants for configuring cell text alignment and column freezing.

```APIDOC
## `Column.Alignment` and `Column.FrozenDirection`

```tsx
import { Column, Alignment, FrozenDirection } from 'react-base-table'

// Cell text alignment
Column.Alignment.LEFT    // 'left'   (default)
Column.Alignment.CENTER  // 'center'
Column.Alignment.RIGHT   // 'right'

// Column freeze position
Column.FrozenDirection.LEFT    // 'left'
Column.FrozenDirection.RIGHT   // 'right'
Column.FrozenDirection.DEFAULT // true  (same as LEFT)
Column.FrozenDirection.NONE    // false (not frozen)
```
```

--------------------------------

### Fixed vs Flex Column Widths

Source: https://context7.com/autodesk/react-base-table/llms.txt

Use `fixed={false}` for flex mode where columns share space proportionally. Use `fixed={true}` for exact pixel widths, enabling horizontal scrolling if content exceeds container width.

```tsx
// Flex mode — columns fill the container
<BaseTable data={rows} width={700} height={400} fixed={false}>
  <Column key="name"  dataKey="name"  width={0} flexGrow={2} title="Name" />
  <Column key="email" dataKey="email" width={0} flexGrow={3} title="Email" />
  <Column key="age"   dataKey="age"   width={80}             title="Age" />
</BaseTable>

// Fixed mode — exact widths, horizontal scroll if total > container width
<BaseTable data={rows} width={700} height={400} fixed>
  <Column key="name"  dataKey="name"  width={200} title="Name" />
  <Column key="email" dataKey="email" width={300} title="Email" />
  <Column key="age"   dataKey="age"   width={80}  title="Age" />
</BaseTable>
```

--------------------------------

### Responsive Table with AutoResizer

Source: https://context7.com/autodesk/react-base-table/llms.txt

Use the AutoResizer component to make BaseTable fill its parent container. It automatically measures the container and provides width and height props to the child render function. The parent container must have explicit dimensions.

```tsx
import BaseTable, { Column, AutoResizer } from 'react-base-table'

function ResponsiveTable() {
  return (
    // AutoResizer fills its parent — the parent must have explicit dimensions
    <div style={{ width: '100%', height: '60vh' }}>
      <AutoResizer onResize={({ width, height }) => console.log('Resized:', width, height)}>
        {({ width, height }) => (
          <BaseTable
            data={rows}
            width={width}
            height={height}
            rowKey="id"
          >
            <Column key="name"  title="Name"  dataKey="name"  width={200} />
            <Column key="email" title="Email" dataKey="email" width={300} />
          </BaseTable>
        )}
      </AutoResizer>
    </div>
  )
}

// Lock one dimension and auto-size the other
<AutoResizer width={700}>   // only auto height
  {({ width, height }) => <BaseTable width={width} height={height} ... />}
</AutoResizer>
```

--------------------------------

### `classPrefix` Prop

Source: https://context7.com/autodesk/react-base-table/llms.txt

Override the default CSS namespace to prevent style collisions when building custom table components.

```APIDOC
## `classPrefix` — Custom CSS Namespace

Override the `classPrefix` (default: `"BaseTable"`) to namespace all generated class names. This is essential when building a custom table component to avoid style collisions.

```tsx
// All class names will use "MyTable__" prefix instead of "BaseTable__"
<BaseTable
  classPrefix="MyTable"
  data={rows}
  width={700}
  height={400}
  rowKey="id"
>
  <Column key="name" title="Name" dataKey="name" width={200} />
</BaseTable>

// In your SCSS:
// .MyTable { ... }
// .MyTable__row { ... }
// .MyTable__header-cell--sortable { ... }
```
```

--------------------------------

### Custom Data Retrieval with `dataKey` and `dataGetter`

Source: https://context7.com/autodesk/react-base-table/llms.txt

Use `dataKey` with dot-notation for nested properties to retrieve cell values. For complex data derivations, provide a `dataGetter` function.

```tsx
const rows = [
  { id: '1', user: { name: 'Alice', address: { city: 'NYC' } }, scores: [90, 85, 92] }
]

<BaseTable data={rows} width={600} height={300} rowKey="id">
  {/* Dot-notation for nested keys */}
  <Column key="name" title="Name" dataKey="user.name" width={150} />
  <Column key="city" title="City" dataKey="user.address.city" width={120} />

  {/* Custom derivation */}
  <Column
    key="avg"
    title="Avg Score"
    dataKey="scores"
    width={100}
    align="right"
    dataGetter={({ rowData }) =>
      (rowData.scores.reduce((a, b) => a + b, 0) / rowData.scores.length).toFixed(1)
    }
  />
</BaseTable>
```

--------------------------------

### TypeScript Type Imports

Source: https://github.com/autodesk/react-base-table/blob/master/README.md

Importing type definitions for BaseTable components and utilities in TypeScript projects.

```typescript
import type { ColumnShape, RowData, SortOrderValue } from 'react-base-table'
```

--------------------------------

### Customize Table Sub-Components with `components`

Source: https://context7.com/autodesk/react-base-table/llms.txt

Replace default sub-components like `SortIndicator` and `ExpandIcon` with custom implementations by passing a `components` object to the `BaseTable` prop. This allows for full control over the appearance and behavior of these elements.

```tsx
import BaseTable, { Column, type TableComponents } from 'react-base-table'

const CustomSortIndicator = ({ sorting, sortOrder, className }) => (
  <span className={className} style={{ marginLeft: 4 }}>
    {sorting ? (sortOrder === 'asc' ? '▲' : '▼') : '⇅'}
  </span>
)

const CustomExpandIcon = ({ expandable, expanded, depth, onExpand }) => {
  if (!expandable) return <span style={{ width: 16 * (depth + 1), display: 'inline-block' }} />
  return (
    <button
      onClick={() => onExpand(!expanded)}
      style={{ marginLeft: depth * 16 }}
    >
      {expanded ? '−' : '+'}
    </button>
  )
}

const tableComponents: TableComponents = {
  SortIndicator: CustomSortIndicator,
  ExpandIcon: CustomExpandIcon,
}

<BaseTable data={rows} width={700} height={400} rowKey="id" components={tableComponents}>
  <Column key="name" title="Name" dataKey="name" width={200} sortable />
</BaseTable>
```

--------------------------------

### `<AutoResizer>` Component

Source: https://context7.com/autodesk/react-base-table/llms.txt

A wrapper component that automatically measures its container and provides width and height to its children, enabling BaseTable to fill responsive containers.

```APIDOC
## `<AutoResizer>`

A wrapper component that automatically measures its container and provides `width` and `height` to the child render function, making `BaseTable` fill any responsive container.

```tsx
import BaseTable, { Column, AutoResizer } from 'react-base-table'

function ResponsiveTable() {
  return (
    // AutoResizer fills its parent — the parent must have explicit dimensions
    <div style={{ width: '100%', height: '60vh' }}>
      <AutoResizer onResize={({ width, height }) => console.log('Resized:', width, height)}>
        {({ width, height }) => (
          <BaseTable
            data={rows}
            width={width}
            height={height}
            rowKey="id"
          >
            <Column key="name"  title="Name"  dataKey="name"  width={200} />
            <Column key="email" title="Email" dataKey="email" width={300} />
          </BaseTable>
        )}
      </AutoResizer>
    </div>
  )
}

// Lock one dimension and auto-size the other
<AutoResizer width={700}>   {/* only auto height */}
  {({ width, height }) => <BaseTable width={width} height={height} ... />}
</AutoResizer>
```
```

--------------------------------

### Integrate Custom Components with BaseTable

Source: https://github.com/autodesk/react-base-table/blob/master/docs/advance.md

Replace default table elements with custom React components by passing them to the `components` prop. This allows for full control over the rendering of cells, headers, and icons.

```jsx
<BaseTable
  classPrefix="AdvanceTable"
  components={{
    TableCell: AdvanceTableCell,
    TableHeaderCell: AdvanceTableHeaderCell,
    ExpandIcon: AdvanceExpandIcon,
    SortIndicator: AdvanceSortIndicator,
  }}
  ...
/>
```

--------------------------------

### Implementing Inline Editing with cellRenderer in react-base-table

Source: https://context7.com/autodesk/react-base-table/llms.txt

This pattern demonstrates how to create an editable cell using the `cellRenderer` prop. It uses local state to manage the editing mode and input value, with event handlers for committing or canceling changes.

```jsx
function EditableCell({ cellData, rowData, rowIndex, container }) {
  const [value, setValue] = React.useState(cellData)
  const [editing, setEditing] = React.useState(false)

  const handleCommit = (e) => {
    if (e.key === 'Enter' || e.type === 'blur') {
      // persist change
      updateData(rowData.id, value)
      setEditing(false)
    }
    if (e.key === 'Escape') {
      setValue(cellData)
      setEditing(false)
    }
  }

  return editing ? (
    <input
      autoFocus
      value={value}
      onChange={e => setValue(e.target.value)}
      onKeyDown={handleCommit}
      onBlur={handleCommit}
      style={{ width: '100%', height: '100%', border: 'none', padding: '0 8px' }}
    />
  ) : (
    <div
      style={{ width: '100%', height: '100%', padding: '0 8px', cursor: 'text' }}
      onDoubleClick={() => setEditing(true)}
    >
      {value}
    </div>
  )
}

<BaseTable data={rows} width={700} height={400} fixed rowKey="id">
  <Column key="name" title="Name" dataKey="name" width={250} cellRenderer={EditableCell} />
</BaseTable>
```

--------------------------------

### Expandable Tree Data in React Base Table

Source: https://context7.com/autodesk/react-base-table/llms.txt

Use `expandColumnKey` and `expandedRowKeys` to manage hierarchical data. Set `expandColumnKey` to the column that displays the expand icon. `expandedRowKeys` can be controlled or uncontrolled.

```tsx
const treeData = [
  {
    id: 'engineering',
    name: 'Engineering',
    headcount: 40,
    children: [
      { id: 'frontend', name: 'Frontend', headcount: 15 },
      { id: 'backend',  name: 'Backend',  headcount: 25 },
    ],
  },
  {
    id: 'design',
    name: 'Design',
    headcount: 10,
    children: [
      { id: 'ux', name: 'UX', headcount: 6 },
      { id: 'ui', name: 'UI', headcount: 4 },
    ],
  },
]

function TreeTable() {
  const [expandedRowKeys, setExpandedRowKeys] = React.useState(['engineering'])

  return (
    <BaseTable
      fixed
      data={treeData}
      width={600}
      height={400}
      rowKey="id"
      expandColumnKey="name"
      expandedRowKeys={expandedRowKeys}
      onExpandedRowsChange={setExpandedRowKeys}
      onRowExpand={({ expanded, rowData }) =>
        console.log(`${rowData.name} is now ${expanded ? 'expanded' : 'collapsed'}`)
      }
    >
      <Column key="name"      title="Department" dataKey="name"      width={200} />
      <Column key="headcount" title="Headcount"  dataKey="headcount" width={120} align="right" />
    </BaseTable>
  )
}
```

--------------------------------

### Column Alignment and FrozenDirection Constants

Source: https://context7.com/autodesk/react-base-table/llms.txt

Utilize Column.Alignment for cell text alignment and Column.FrozenDirection for column freezing positions. Defaults are LEFT for alignment and DEFAULT (LEFT) for frozen direction.

```tsx
import { Column, Alignment, FrozenDirection } from 'react-base-table'

// Cell text alignment
Column.Alignment.LEFT    // 'left'   (default)
Column.Alignment.CENTER  // 'center'
Column.Alignment.RIGHT   // 'right'

// Column freeze position
Column.FrozenDirection.LEFT    // 'left'
Column.FrozenDirection.RIGHT   // 'right'
Column.FrozenDirection.DEFAULT // true  (same as LEFT)
Column.FrozenDirection.NONE    // false (not frozen)
```

--------------------------------

### Custom Renderers for Slots in React Base Table

Source: https://context7.com/autodesk/react-base-table/llms.txt

Customize the empty state, overlay, and footer areas of the table using `emptyRenderer`, `overlayRenderer`, and `footerRenderer`. This allows for custom components or messages in these specific table sections.

```tsx
const LoadingOverlay = () => (
  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center',
                width: '100%', height: '100%', background: 'rgba(255,255,255,0.6)' }}>
    <span>Loading…</span>
  </div>
)

const EmptyState = () => (
  <div style={{ textAlign: 'center', padding: 40, color: '#999' }}>
    No records found
  </div>
)

<BaseTable
  data={isLoading ? [] : rows}
  width={700}
  height={400}
  rowKey="id"
  footerHeight={40}
  emptyRenderer={EmptyState}
  overlayRenderer={isLoading ? LoadingOverlay : undefined}
  footerRenderer={() => (
    <div style={{ textAlign: 'right', padding: '0 16px', lineHeight: '40px' }}>
      {rows.length} records
    </div>
  )}>
  <Column key="name" title="Name" dataKey="name" width={200} />
</BaseTable>
```

--------------------------------

### Custom Table with Row Selection

Source: https://github.com/autodesk/react-base-table/blob/master/docs/selection.md

This snippet defines a custom `StyledTable` component with specific styling for selected rows and a `SelectionCell` component for rendering checkboxes in the selection column. It also includes a `SelectableTable` component that manages the selection state and integrates the selection column.

```jsx
const StyledTable = styled(BaseTable)`
  .row-selected {
    background-color: #e3e3e3;
  }
`;

class SelectionCell extends React.PureComponent {
  _handleChange = e => {
    const { rowData, rowIndex, column } = this.props;
    const { onChange } = column;

    onChange({ selected: e.target.checked, rowData, rowIndex });
  };

  render() {
    const { rowData, column } = this.props;
    const { selectedRowKeys, rowKey } = column;
    const checked = selectedRowKeys.includes(rowData[rowKey]);

    return <input type="checkbox" checked={checked} onChange={this._handleChange} />;
  }
}

class SelectableTable extends React.PureComponent {
  constructor(props) {
    super(props);

    const { selectedRowKeys, defaultSelectedRowKeys, expandedRowKeys, defaultExpandedRowKeys } = props;
    this.state = {
      selectedRowKeys: (selectedRowKeys !== undefined ? selectedRowKeys : defaultSelectedRowKeys) || [],
      expandedRowKeys: (expandedRowKeys !== undefined ? expandedRowKeys : defaultExpandedRowKeys) || [],
    };
  }

  /**
   * Set `selectedRowKeys` manually.
   * This method is available only if `selectedRowKeys` is uncontrolled.
   *
   * @param {array} selectedRowKeys
   */
  setSelectedRowKeys(selectedRowKeys) {
    // if `selectedRowKeys` is controlled
    if (this.props.selectedRowKeys !== undefined) return;

    this.setState({
      selectedRowKeys: cloneArray(selectedRowKeys),
    });
  }

  /**
   * See BaseTable#setExpandedRowKeys
   */
  setExpandedRowKeys(expandedRowKeys) {
    // if `expandedRowKeys` is controlled
    if (this.props.expandedRowKeys !== undefined) return;

    this.setState({
      expandedRowKeys: cloneArray(expandedRowKeys),
    });
  }

  /* some other custom methods and proxy methods */

  /**
   * Remove rowKeys from inner state  manually, it's useful to purge dirty state after rows removed.
   * This method is available only if `selectedRowKeys` or `expandedRowKeys` is uncontrolled.
   *
   * @param {array} rowKeys
   */
  removeRowKeysFromState(rowKeys) {
    if (!Array.isArray(rowKeys)) return;

    const state = {};
    if (this.props.selectedRowKeys === undefined && this.state.selectedRowKeys.length > 0) {
      state.selectedRowKeys = this.state.selectedRowKeys.filter(key => !rowKeys.includes(key));
    }
    if (this.props.expandedRowKeys === undefined && this.state.expandedRowKeys.length > 0) {
      state.expandedRowKeys = this.state.expandedRowKeys.filter(key => !rowKeys.includes(key));
    }
    if (state.selectedRowKeys || state.expandedRowKeys) {
      this.setState(state);
    }
  }

  _handleSelectChange = ({ selected, rowData, rowIndex }) => {
    const selectedRowKeys = [...this.state.selectedRowKeys];
    const key = rowData[this.props.rowKey];

    if (selected) {
      if (!selectedRowKeys.includes(key)) selectedRowKeys.push(key);
    } else {
      const index = selectedRowKeys.indexOf(key);
      if (index > -1) {
        selectedRowKeys.splice(index, 1);
      }
    }

    // if `selectedRowKeys` is uncontrolled, update internal state
    if (this.props.selectedRowKeys === undefined) {
      this.setState({ selectedRowKeys });
    }
    this.props.onRowSelect({ selected, rowData, rowIndex });
    this.props.onSelectedRowsChange(selectedRowKeys);
  };

  _rowClassName = ({ rowData, rowIndex }) => {
    const { rowClassName, rowKey } = this.props;
    const { selectedRowKeys } = this.state;

    const rowClass = rowClassName ? callOrReturn(rowClassName, { rowData, rowIndex }) : '';
    const key = rowData[rowKey];

    return [rowClass, selectedRowKeys.includes(key) && 'row-selected'].filter(Boolean).concat(' ');
  };

  render() {
    const { columns, children, selectable, selectionColumnProps, ...rest } = this.props;
    const { selectedRowKeys } = this.state;

    // you'd better memoize this operation
    let _columns = columns || normalizeColumns(children);
    if (selectable) {
      const selectionColumn = {
        width: 40,
        flexShrink: 0,
        resizable: false,
        frozen: Column.FrozenDirection.LEFT,
        cellRenderer: SelectionCell,
        ...selectionColumnProps,
        key: '__selection__',
        rowKey: this.props.rowKey,
        selectedRowKeys: selectedRowKeys,
        onChange: this._handleSelectChange,
      };
      _columns = [selectionColumn, ..._columns];
    }

    return <StyledTable {...rest} columns={_columns} rowClassName={this._rowClassName} />;
  }
}

SelectableTable.defaultProps = {
  ...BaseTable.defaultProps,
  onRowSelect: noop,
  onSelectedRowsChange: noop,
};

```

--------------------------------

### `SortOrder` Constants

Source: https://context7.com/autodesk/react-base-table/llms.txt

Constants for defining sort order in the table.

```APIDOC
## `SortOrder` Constants

```tsx
import { SortOrder } from 'react-base-table'

SortOrder.ASC   // 'asc'
SortOrder.DESC  // 'desc'
```
```

--------------------------------

### Freeze Columns Left/Right with `frozen`

Source: https://context7.com/autodesk/react-base-table/llms.txt

Use the `frozen` property with `FrozenDirection.LEFT` or `FrozenDirection.RIGHT` to keep columns visible during horizontal scrolling. Requires the table to be in `fixed` mode.

```tsx
import { Column, FrozenDirection } from 'react-base-table'

const columns = [
  { key: 'id',      title: 'ID',      dataKey: 'id',      width: 60,  frozen: FrozenDirection.LEFT  },
  { key: 'name',    title: 'Name',    dataKey: 'name',    width: 150, frozen: FrozenDirection.LEFT  },
  { key: 'col1',    title: 'Col 1',   dataKey: 'col1',    width: 120 },
  { key: 'col2',    title: 'Col 2',   dataKey: 'col2',    width: 120 },
  { key: 'col3',    title: 'Col 3',   dataKey: 'col3',    width: 120 },
  { key: 'actions', title: 'Actions', dataKey: 'actions', width: 100, frozen: FrozenDirection.RIGHT },
]

<BaseTable data={rows} width={700} height={400} fixed rowKey="id" columns={columns} />
```

--------------------------------

### SortOrder Constants

Source: https://context7.com/autodesk/react-base-table/llms.txt

Import and use the SortOrder constants for defining sort directions in your table.

```tsx
import { SortOrder } from 'react-base-table'

SortOrder.ASC   // 'asc'
SortOrder.DESC  // 'desc'
```

--------------------------------

### Custom CSS Namespace with classPrefix

Source: https://context7.com/autodesk/react-base-table/llms.txt

Override the default `BaseTable` class prefix to namespace all generated class names. This is useful for avoiding style collisions when building custom table components.

```tsx
// All class names will use "MyTable__" prefix instead of "BaseTable__"
<BaseTable
  classPrefix="MyTable"
  data={rows}
  width={700}
  height={400}
  rowKey="id"
>
  <Column key="name" title="Name" dataKey="name" width={200} />
</BaseTable>

// In your SCSS:
// .MyTable { ... }
// .MyTable__row { ... }
// .MyTable__header-cell--sortable { ... }
```

--------------------------------

### Imperative Table Scrolling with Refs

Source: https://context7.com/autodesk/react-base-table/llms.txt

Access internal scroll and state methods of BaseTable using a React ref. This allows programmatic control over scrolling to specific rows, positions, or offsets.

```tsx
import BaseTable, { Column, type BaseTableProps } from 'react-base-table'

function ScrollableTable() {
  const tableRef = React.useRef<BaseTable>(null)

  return (
    <>
      <div style={{ display: 'flex', gap: 8, marginBottom: 8 }}>
        <button onClick={() => tableRef.current?.scrollToRow(0, 'start')}>
          Top
        </button>
        <button onClick={() => tableRef.current?.scrollToRow(99, 'center')}>
          Row 100
        </button>
        <button onClick={() => tableRef.current?.scrollToTop(500)}>
          Y=500
        </button>
        <button onClick={() => tableRef.current?.scrollToLeft(200)}>
          X=200
        </button>
        <button onClick={() => tableRef.current?.scrollToPosition({ scrollLeft: 100, scrollTop: 1000 })}>
          Position
        </button>
      </div>
      <BaseTable
        ref={tableRef}
        data={rows}
        width={700}
        height={400}
        fixed
        rowKey="id"
      >
        <Column key="name"  title="Name"  dataKey="name"  width={200} />
        <Column key="email" title="Email" dataKey="email" width={300} />
      </BaseTable>
    </>
  )
}
```

--------------------------------

### Override BaseTable SCSS Variables

Source: https://github.com/autodesk/react-base-table/blob/master/README.md

Override default SCSS variables to customize the appearance of BaseTable. Ensure you import the BaseTable SCSS after setting your variables.

```scss
// override default variables for BaseTable
$table-prefix: AdvanceTable;

$table-font-size: 13px;
$table-padding-left: 15px;
$table-padding-right: 15px;
$column-padding: 7.5px;
... 
$show-frozen-rows-shadow: false;
$show-frozen-columns-shadow: true;

@import 'react-base-table/dist/esm/_BaseTable.scss';

.#{$table-prefix} {
  &:not(.#{$table-prefix}--show-left-shadow) {
    .#{$table-prefix}__table-frozen-left {
      box-shadow: none;
    }
  }

  &:not(.#{$table-prefix}--show-right-shadow) {
    .#{$table-prefix}__table-frozen-right {
      box-shadow: none;
    }
  }

  ...
}
```