help(COMPONENT): Getting Sticky to work right for Angular Material Data Table.

#### What are you trying to do?

Get sticky to work right. Here's a Stackblitz that has an ID column that is sticky, and two other columns. In this case sticky works correctly because there are only two other columns:

https://stackblitz.com/edit/angular-material-minimal-sticky

However if we add 100 columns, as is done in this demo:

https://stackblitz.com/edit/angular-material-minimal-with-paging-and-sorting-and-sticky-100

The ID column disappears when scrolling horizontally.

The solution suggested on SO is to use inline-flex:

https://stackoverflow.com/questions/62562388/getting-sticky-to-always-stick-the-column-in-material-data-table

However that creates another problem, which is that the header cells no longer expand to fit the table with.

That can cause table rows to wrap inside the main table container as described here:

https://stackoverflow.com/questions/62584549/material-data-table-wraps-rows-when-table-width-allows-it

Any thoughts on how to get sticky to work right, without causing the wrapping issues?

まず、リンクされている2つの StackBlitz デモで動作を再現し、リンクされている Stack Overflow の回答で説明されている inline-flex アプローチと比較します。次に、Angular Material のデータテーブルにおける固定列の動作を調査し、その後、100列ある場合でも ID 列が表示されたままになり、ヘッダーのサイズ調整と行の折り返しが引き続き正しく機能することを確認します。

索引モデルが issue の本文から書いたものです。