Для начала я прочитал этот пост об использовании нижних колонтитулов для исправления последней строки , а также всей этой цепочки при игнорировании верхней строки при сортировке . На самом деле, я прочитал эту ветку несколько раз.
Темы не дают окончательного ответа о том, как закрепить верхнюю строку с таблицей реагирования, но это очень важно для моего текущего проекта, и я ищу решение. Я создал следующую фиктивную таблицу для помощи с этим постом:
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, или (b) имеет желаемые данные первой строки в объекте, который полностью отделен от массива data, и кодируя это в header столбца, или (c) какой-то другой подход, я не возражаю, если он немного хакерский. По крайней мере, кажется, что в любом случае такого подхода не существует. Не стесняйтесь создавать фиктивные данные за пределами data, если вы можете закрепить их как верхний ряд.
Я бы хотел стилизовать фиксированный первый ряд иначе, чем как заголовки над ним, так и ряды под ним. Ради этого поста достаточно было бы получить простое оформление для этой строки (например, другой цвет фона)!
Этот сайт здесь (не встроенный в React tho) имеет отличный пример фиксированной первой строки. При сортировке таблицы строка Totals остается сверху. Он также стилизован отдельно от других строк.
Заплатит этот пост через 2 дня, а также любые ответы заранее, так как я мог бы действительно действительно воспользоваться помощью. Любые мысли / помощь приветствуется!
Редактировать: - еще одно предложение (хотя я не знаю, как это можно сделать) - просто переставить React-Table Footer в качестве первой строки между заголовками и данными. Footer невосприимчив к сортировке, хотя он снизу, а не сверху.
Редактировать 2: - для этой темы , невозможно создать третью группу headerGroup, которая была бы необходима, так как в таблицах моих веб-сайтов уже есть headerGroup и другой основной заголовок.