跳转到内容

🎉 v5 is out! Head to the documentation to get started.

Data Grid - Layout

The data grid offers multiple layout mode.

By default, the grid has no intrinsic dimensions. It occupies the space its parent leaves.

⚠️ When using % (percentage) for your height or width. You need to make sure the container you are putting the grid into also has an intrinsic dimension. The browsers fit the element according to a percentage of the parent dimension. If the parent has no dimensions, then the % will be zero.

Flex layout

It's recommended to use a flex container to render the grid. This allows a flexible layout, resizes well, and works on all devices.

Desk
Commodity
Trader Name
Trader Email
Quantity
D-9701
Rapeseed
Lucinda Watkins
82,741
D-3988
Milk
Thomas Miles
10,740
D-5573
Cotton No.2
Olga Hansen
13,055
D-9545
Rough Rice
Elizabeth Carlson
63,011
D-3775
Sugar No.14
Lilly Guerrero
48,844

每页行数:

100

1-5 的 5

<div style={{ display: 'flex', height: '100%' }}>
  <div style={{ flexGrow: 1 }}>
    <DataGrid {...data} />
  </div>
</div>

Predefined dimensions

You can predefine dimensions for the parent of the grid.

Desk
Commodity
Trader Name
Trader Email
Quantity
D-9740
Frozen Concentrated Orange Juice
Garrett Henry
60,510
D-2615
Sugar No.11
Thomas Jordan
88,964
D-9134
Cotton No.2
Kathryn Greene
77,951
D-1382
Sugar No.14
Katie Caldwell
91,573
D-1331
Soybean Meal
Rena Craig
83,308

每页行数:

100

1-5 的 5

<div style={{ height: 350, width: '100%' }}>
  <DataGrid {...data} />
</div>

Auto height

The autoHeight prop allows the grid to size according to its content. This means that the number of rows will drive the height of the grid and consequently, they will all be rendered and visible to the user at the same time.

⚠️ This is not recommended for large datasets as row virtualization will not be able to improve performance by limiting the number of elements rendered in the DOM.

Desk
Commodity
Trader Name
Trader Email
Quantity
D-5984
Soybean Meal
Emilie Morris
89,046
D-5413
Wheat
Kyle Bryan
12,031
D-101
Oats
Norman Pittman
14,640
D-7822
Cocoa
Lura Tate
81,084

每页行数:

100

1-4 的 4

more content

<DataGrid autoHeight {...data} />
<p>more content</p>