React-Table исправил первую строку
Для начала я прочитал этот пост об использовании нижних колонтитулов для исправления строки прошлой, а также вся эта ветка об игнорировании верхней строки при сортировке. На самом деле, я перечитывал эту тему несколько раз.
Темы не дают окончательных результатов о том, как закрепить верхнюю строку с помощью реагирующей таблицы, но это очень важно для моего текущего проекта, и я ищу решение. Я создал следующую фиктивную таблицу для помощи в этом посте:
var ReactTable = ReactTable.default
class App extends React.Component {
constructor() {
super();
this.state = {
data: [
{ firstName: 'joe', lastName: 'james', age: 18, status: 'real', visits: 14 },
{ firstName: 'tom', lastName: 'smith', age: 15, status: 'okay', visits: 24 },
{ firstName: 'tom', lastName: 'smith', age: 15, status: 'okay', visits: 24 },
{ firstName: 'tom', lastName: 'smith', age: 15, status: 'okay', visits: 24 },
{ firstName: 'tom', lastName: 'smith', age: 15, status: 'okay', visits: 24 }
]
};
}
render() {
const { data } = this.state;
return (
<div>
<ReactTable
data = {data}
columns = {[
{
Header: "Name",
columns: [
{
width: '100',
Header: "First Name",
accessor: "firstName"
},
{
width: '100',
Header: "Last Name",
id: "lastName",
accessor: d => d.lastName
}
]
},
{
Header: "Info",
columns: [
{
width: '100',
Header: "Age",
accessor: "age"
},
{
width: '100',
Header: "Status",
accessor: "status"
}
]
},
{
Header: 'Stats',
columns: [
{
width: '100',
Header: "Visits",
accessor: "visits"
}
]
}
]}
defaultPageSize = {5}
showPagination = {false}
className = "-striped -highlight"
/>
<br />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("app"));<link href = "https://cdnjs.cloudflare.com/ajax/libs/react-table/6.5.3/react-table.css" rel = "stylesheet"/>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-table/6.5.3/react-table.js"></script>
<div id = "app"></div>Моя цель в настоящее время состоит в том, чтобы создать фиксированную верхнюю строку любым возможным способом. Будь то (а) наличие желаемых данных первой строки в качестве первого объекта в массиве data или (б) наличие желаемых данных первой строки в объекте, который полностью отделен от массива data, и кодирование их в header столбца или (c) какой-то другой подход, я не против, если он немного хакерский. Кажется, по крайней мере, что в любом случае не существует нехакерского подхода... Не стесняйтесь создавать фиктивные данные за пределами data, если вы можете закрепить их в верхней строке.
Я хотел бы стилизовать фиксированную первую строку иначе, чем заголовки над ней и строки под ней. Для этого поста будет достаточно любого простого стиля в этой строке (например, другого цвета фона)!
Этот сайт здесь (хотя и не встроенный в React) имеет отличный пример фиксированной первой строки. При сортировке таблицы строка Totals остается сверху. Он также оформлен отдельно от других строк.
Вознаграждение за этот пост через 2 дня, а также любые ответы заранее, так как я мог бы действительно очень действительно воспользоваться помощью. Любые мысли/помощь приветствуются!
Редактировать: — еще одно предложение (хотя я не знаю, как это можно сделать) — просто переместить Footer React-Table в качестве первой строки между заголовками и данными. Footer невосприимчив к сортировке, хотя и находится внизу, а не вверху.
Редактировать 2: - согласно эта тема невозможно иметь 3-ю группу заголовков, которая потребуется, поскольку в таблицах моих веб-сайтов уже есть группа заголовков и другой основной заголовок.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Добавить вариант стиля с высотой
style = {{
height: "200px"
}}
var ReactTable = ReactTable.default
class App extends React.Component {
constructor() {
super();
this.state = {
data: [
{ firstName: 'joe', lastName: 'james', age: 18, status: 'real', visits: 14 },
{ firstName: 'tom', lastName: 'smith', age: 15, status: 'okay', visits: 24 },
{ firstName: 'tom', lastName: 'smith', age: 15, status: 'okay', visits: 24 },
{ firstName: 'tom', lastName: 'smith', age: 15, status: 'okay', visits: 24 },
{ firstName: 'tom', lastName: 'smith', age: 15, status: 'okay', visits: 24 }
]
};
}
render() {
const { data } = this.state;
return (
<div>
<ReactTable
data = {data}
columns = {[
{
Header: "Name",
columns: [
{
width: '100',
Header: "First Name",
accessor: "firstName"
},
{
width: '100',
Header: "Last Name",
id: "lastName",
accessor: d => d.lastName
}
]
},
{
Header: "Info",
columns: [
{
width: '100',
Header: "Age",
accessor: "age"
},
{
width: '100',
Header: "Status",
accessor: "status"
}
]
},
{
Header: 'Stats',
columns: [
{
width: '100',
Header: "Visits",
accessor: "visits"
}
]
}
]}
defaultPageSize = {5}
showPagination = {false}
style = {{
height: "200px"
}}
className = "-striped -highlight"
/>
<br />
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("app"));<link href = "https://cdnjs.cloudflare.com/ajax/libs/react-table/6.5.3/react-table.css" rel = "stylesheet"/>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-table/6.5.3/react-table.js"></script>
<div id = "app"></div>Если вам не нужен нижний колонтитул, вы можете отобразить в нем первую строку, а затем изменить порядок html:
.rt-table > .rt-thead { order: -2 }
.rt-table > .rt-tbody { order: -1 }
.rt-table > .rt-tfoot { order: -2 }
Возможно, я не объяснил проблему лучше. Дело не в том, что мне нужен фиксированный заголовок сверху при прокрутке, а в том, что первая строка данных (джо джеймс 18 реальных 14), которая всегда должна быть закреплена как 1-я строка (невосприимчивая к сортировке), сразу под заголовком имена.