создание части таблицы с возможностью прокрутки - PullRequest
Новая
       8

создание части таблицы с возможностью прокрутки

0 голосов
/ 04 февраля 2019

Чтобы сделать часть таблицы прокручиваемой, я использую div внутри таблицы, но получаю предупреждение:

Предупреждение: validateDOMNesting (...):

не может отображаться какпотомок

Я понимаю предупреждение, но я бы хотел, чтобы часть таблицы (большая ее часть) была прокручиваемой, ограничивая, таким образом, максимальную высоту части таблицы: 

<div className="main-table">
               <table className="main-edit-table" align="right">
                     <tbody>
                            <tr>
                                 <th>haveri</th>
                             </tr>
                              <div className="inst-container">
                              {this.state.list && this.state.list.map((collection, key) => (
                                    <tr key={key}>
                                        <td>{key+1}</td>
                                        <td>
                                            <div className="main-item-container">
                                                <span>{collection}</span>
                                            </div>
                                        </td>
                                        <td>{collection.subjects[0] && collection.subjects[0].name}</td>
                                    </tr>      
                                    ))}
                                    </div>
                            </tbody>
                        </table>

                    </div>

CSS: 

.inst-container {
    border: 1px solid #eeccee;
    max-height: 300px;
    overflow-y: scroll;
    width: 100%;
}

Все, что я делаю, это вставляю div внутри таблицы после ее заголовков, чтобы сделать саму таблицу прокручиваемой.

Два вопроса:

  1. Это предупреждение "это плохо"?Я имею в виду, я получаю предупреждение, но оно работает нормально
  2. Что бы вы сделали, чтобы создать заголовок (который может содержать несколько столбцов) и прокручиваемую таблицу внизу?Является ли использование системы сетки единственным вариантом?

1 Ответ

0 голосов
/ 04 февраля 2019

Я бы предпочел обернуть всю таблицу внутри контейнера div с переполнением и установить заголовки столбцов в липкое положение.

См. Ниже: 

<div className="container">
    <table className="main-edit-table" align="right">
        <thead>
            <tr>
                <th className="sticky-column">haveri</th>
            </tr>
        </thead>
        <tbody>
                {this.state.list && this.state.list.map((collection, key) => (
                    <tr key={key}>
                        <td>{key+1}</td>
                         <td>
                             <div className="main-item-container">
                                 <span>{collection}</span>
                             </div>
                             </td>
                             <td>{collection.subjects[0] && 
                             collection.subjects[0].name}</td>
                    </tr>      
                                ))}
        </tbody>
    </table>
</div>

CSS: 

.sticky-column {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0
}

.container {
    border: 1px solid #eeccee;
    max-height: 300px;
    overflow-y: scroll;
    width: 100%;
}
...