0.1.6 • Published 2 years ago
@grossb/react-table v0.1.6
React table
Данный компонент является оберткой для html-тегов table, tbody, thead, tr, th, td
Оглавление
Table
children- дочерний компонентclassName- классы стилей для таблицыstriped- цвет фона строк чередуютсяcontainerProps- классы стилей для контейнера таблицыfixedTopTitle- зафиксировать заголовок таблицы при вертикальном скроллеfixedLeftColumn- зафиксировать левый столбец таблицы при горизонтальном скролле
Body
children- дочерний компонент
Head
children- дочерний компонент
Row
children- дочерний компонент
Cell
Данный компонент принимает все стандартные параметры td и th
children- дочерний компонентcomponent- определяет каким тегом отрисовывать ячейку:tdилиth, по умолчаниюtdeditable- включает возможность отображение компонента редактирования прямо в ячейке. Но в этом случае необходимо определитьeditComponent.onDoubleClick- функция, которая будет вызываться при двойной нажатии на ячейку.onBlur- функция, которая будет вызываться при двойной нажатии на ячейку. Вызывается, когдаedutable = trueeditComponent- компонент редактирования значения в ячейке таблицы. Отображается приedutable = trueи после двойного клика на ячейку
CSS переменные
--fixed-table-cell-background-color- задает цвет фона для ячеек, которые находятся в зафиксированных верхнем заголовке или в левом столбце. Значение по умолчанию -white.--table-striped-odd-row-background-color- цвет фона нечетных строк приstriped=true. Значение по умолчанию -#e8eaf6--table-striped-even-row-background-color- цвет фона четных строк приstriped=true. Значение по умолчанию -white--table-row-hover-background-color- цвет фона при наведении на строку. Значение по умолчанию -#c5cae9
Пример использования
const data = [
{id: 0, name: "First item"},
{id: 1, name: "Second item"}
];
const rows = data.map((item) => <Row key={item.id}>
<Cell editable editComponent={<input />}>
{item.id}
</Cell>
<Cell editable editComponent={<input />}>
{item.name}
</Cell>
</Row>)
function App() {
return (
<div className="App">
<Table fixedTopTitle fixedLeftColumn>
<Head>
<Row>
<Cell component="th">1
ID
</Cell>
<Cell component="th">
Name
</Cell>
</Row>
</Head>
<Body>
{rows}
</Body>
</Table>
</div>
);
}