0
# Layout and Sizing Components
1

2
Components that handle automatic sizing and layout management for virtualized components.
3

4
## Capabilities
5

6
### AutoSizer Component
7

8
Automatically adjusts its children's width and height to fill the available space in the parent container.
9

10
```javascript { .api }
11
/**
12
 * Automatically sizes children to fill available space
13
 * @param props - AutoSizer configuration
14
 */
15
function AutoSizer(props: {
16
  /** Function that renders children with calculated dimensions */
17
  children: (params: {height: number, width: number}) => React.Node;
18
  /** Optional CSS class name */
19
  className?: string;
20
  /** Default height for SSR */
21
  defaultHeight?: number;
22
  /** Default width for SSR */
23
  defaultWidth?: number;
24
  /** Disable dynamic height property (default: false) */
25
  disableHeight?: boolean;
26
  /** Disable dynamic width property (default: false) */
27
  disableWidth?: boolean;
28
  /** CSP nonce for inline styles */
29
  nonce?: string;
30
  /** Callback invoked on resize (default: () => {}) */
31
  onResize?: (params: {height: number, width: number}) => void;
32
  /** Optional inline style (default: {}) */
33
  style?: object;
34
}): React.Component;
35
```
36

37
**Usage Examples:**
38

39
```javascript
40
import React from 'react';
41
import { AutoSizer, List } from 'react-virtualized';
42

43
// Basic AutoSizer usage
44
function ResponsiveList({ items }) {
45
  const rowRenderer = ({ index, key, style }) => (
46
    <div key={key} style={style}>
47
      {items[index]}
48
    </div>
49
  );
50

51
  return (
52
    <div style={{ height: '100vh', width: '100%' }}>
53
      <AutoSizer>
54
        {({ height, width }) => (
55
          <List
56
            height={height}
57
            width={width}
58
            rowCount={items.length}
59
            rowHeight={50}
60
            rowRenderer={rowRenderer}
61
          />
62
        )}
63
      </AutoSizer>
64
    </div>
65
  );
66
}
67

68
// AutoSizer with resize callback
69
function MonitoredList({ items, onResize }) {
70
  const handleResize = ({ height, width }) => {
71
    console.log(`Container resized to ${width}x${height}`);
72
    onResize?.(width, height);
73
  };
74

75
  return (
76
    <div className="container">
77
      <AutoSizer onResize={handleResize}>
78
        {({ height, width }) => (
79
          <List
80
            height={height}
81
            width={width}
82
            rowCount={items.length}
83
            rowHeight={35}
84
            rowRenderer={({ index, key, style }) => (
85
              <div key={key} style={style}>
86
                Item {index}: {items[index]}
87
              </div>
88
            )}
89
          />
90
        )}
91
      </AutoSizer>
92
    </div>
93
  );
94
}
95

96
// AutoSizer with disabled height (fixed height container)
97
function FixedHeightList({ items }) {
98
  return (
99
    <div style={{ height: 300, width: '100%' }}>
100
      <AutoSizer disableHeight>
101
        {({ width }) => (
102
          <List
103
            height={300}
104
            width={width}
105
            rowCount={items.length}
106
            rowHeight={40}
107
            rowRenderer={({ index, key, style }) => (
108
              <div key={key} style={style}>
109
                {items[index]}
110
              </div>
111
            )}
112
          />
113
        )}
114
      </AutoSizer>
115
    </div>
116
  );
117
}
118
```
119

120
### ColumnSizer Component
121

122
Higher-order component that calculates column widths for Grid-based components based on available space and constraints.
123

124
```javascript { .api }
125
/**
126
 * Manages column width distribution for Grid components
127
 * @param props - ColumnSizer configuration
128
 */
129
function ColumnSizer(props: {
130
  /** Function that renders children with calculated column widths */
131
  children: (params: {
132
    adjustedWidth: number,
133
    getColumnWidth: (params: {index: number}) => number,
134
    registerChild: (element: React.Component) => void
135
  }) => React.Node;
136
  /** Maximum width for any column */
137
  columnMaxWidth?: number;
138
  /** Minimum width for any column */
139
  columnMinWidth?: number;
140
  /** Total number of columns */
141
  columnCount: number;
142
  /** Total available width */
143
  width: number;
144
}): React.Component;
145
```
146

147
**Usage Examples:**
148

149
```javascript
150
import React from 'react';
151
import { ColumnSizer, Grid, AutoSizer } from 'react-virtualized';
152

153
// Basic ColumnSizer usage with Grid
154
function ResponsiveGrid({ data }) {
155
  const cellRenderer = ({ columnIndex, key, rowIndex, style }) => (
156
    <div key={key} style={style} className="grid-cell">
157
      {data[rowIndex][columnIndex]}
158
    </div>
159
  );
160

161
  return (
162
    <AutoSizer>
163
      {({ height, width }) => (
164
        <ColumnSizer
165
          columnCount={data[0].length}
166
          columnMinWidth={60}
167
          columnMaxWidth={200}
168
          width={width}
169
        >
170
          {({ adjustedWidth, getColumnWidth, registerChild }) => (
171
            <Grid
172
              ref={registerChild}
173
              cellRenderer={cellRenderer}
174
              columnCount={data[0].length}
175
              columnWidth={getColumnWidth}
176
              height={height}
177
              rowCount={data.length}
178
              rowHeight={50}
179
              width={adjustedWidth}
180
            />
181
          )}
182
        </ColumnSizer>
183
      )}
184
    </AutoSizer>
185
  );
186
}
187

188
// ColumnSizer with Table for responsive columns
189
function ResponsiveTable({ tableData, columns }) {
190
  const rowGetter = ({ index }) => tableData[index];
191

192
  return (
193
    <AutoSizer>
194
      {({ height, width }) => (
195
        <ColumnSizer
196
          columnCount={columns.length}
197
          columnMinWidth={80}
198
          columnMaxWidth={300}
199
          width={width}
200
        >
201
          {({ adjustedWidth, getColumnWidth, registerChild }) => (
202
            <Table
203
              ref={registerChild}
204
              width={adjustedWidth}
205
              height={height}
206
              headerHeight={50}
207
              rowHeight={40}
208
              rowCount={tableData.length}
209
              rowGetter={rowGetter}
210
            >
211
              {columns.map((column, index) => (
212
                <Column
213
                  key={column.dataKey}
214
                  label={column.label}
215
                  dataKey={column.dataKey}
216
                  width={getColumnWidth({ index })}
217
                />
218
              ))}
219
            </Table>
220
          )}
221
        </ColumnSizer>
222
      )}
223
    </AutoSizer>
224
  );
225
}
226

227
// Advanced ColumnSizer with custom width calculation
228
function CustomColumnGrid({ data, columnConfig }) {
229
  const cellRenderer = ({ columnIndex, key, rowIndex, style }) => {
230
    const config = columnConfig[columnIndex];
231
    return (
232
      <div key={key} style={style} className={`cell-${config.type}`}>
233
        {data[rowIndex][columnIndex]}
234
      </div>
235
    );
236
  };
237

238
  return (
239
    <div style={{ height: 400, width: '100%' }}>
240
      <AutoSizer>
241
        {({ height, width }) => (
242
          <ColumnSizer
243
            columnCount={columnConfig.length}
244
            columnMinWidth={50}
245
            width={width}
246
          >
247
            {({ adjustedWidth, getColumnWidth, registerChild }) => {
248
              // Custom width calculation based on column type
249
              const customGetColumnWidth = ({ index }) => {
250
                const baseWidth = getColumnWidth({ index });
251
                const config = columnConfig[index];
252
                
253
                // Adjust width based on column type
254
                if (config.type === 'number') return Math.max(baseWidth, 80);
255
                if (config.type === 'date') return Math.max(baseWidth, 120);
256
                if (config.type === 'text') return baseWidth;
257
                
258
                return baseWidth;
259
              };
260

261
              return (
262
                <Grid
263
                  ref={registerChild}
264
                  cellRenderer={cellRenderer}
265
                  columnCount={columnConfig.length}
266
                  columnWidth={customGetColumnWidth}
267
                  height={height}
268
                  rowCount={data.length}
269
                  rowHeight={45}
270
                  width={adjustedWidth}
271
                />
272
              );
273
            }}
274
          </ColumnSizer>
275
        )}
276
      </AutoSizer>
277
    </div>
278
  );
279
}
280
```