Особенности React.js Blueprint Table Редактирование
React.js Blueprint — это набор инструментов для пользовательского интерфейса. Он очень оптимизирован и популярен для создания сложных интерфейсов с высокой плотностью данных для настольных приложений.
Компонент таблицы позволяет пользователю отображать строки данных. Мы можем использовать следующий подход в ReactJS для использования компонента ReactJS Blueprint Table.
Компонент EditableCell в столбце обеспечивает редактирование двойным щелчком в теле таблицы, а компонент EditableName позволяет редактировать заголовок столбца в таблице, щелкая текст заголовка.
Реквизит для стола:
- numRows: используется для установки количества строк.
- cellRenderer: используется для определения способа отображения данных, и мы можем установить его для каждого компонента столбца.
- renderColumnHeaderCell: используется для определения заголовка в компоненте столбца.
Реквизит EditableCell2:
- columnIndex: указывает индекс столбца ячейки.
- интерактивный: это логическое значение. Он определяет, следует ли включить взаимодействие с мышью или нет.
- isFocused : это логическое значение. Он определяет, находится ли текущая ячейка в фокусе или нет.
- ключ: строковый объект.
- cellRef: дескриптор ссылки для внешнего div.
- загрузка: это логическое значение. Он определяет, находится ли он в состоянии загрузки или нет.
- onCancel: функция обратного вызова void, которая срабатывает при отмене редактирования.
- onChange: функция обратного вызова void, которая срабатывает при редактировании.
- onConfirm: функция обратного вызова void, которая срабатывает при подтверждении редактирования.
- onKeyDown: функция обратного вызова, вызываемая, когда ячейка находится в фокусе и нажата клавиша.
- onKeyPress: функция обратного вызова, вызываемая при нажатии символьной клавиши.
- onKeyUp: функция обратного вызова, вызываемая, когда ячейка находится в фокусе и клавиша отпускается.
- rowIndex: указывает индекс строки ячейки.
- style: определяет стили CSS.
- tabIndex: указывает индекс табуляции ячейки.
- всплывающая подсказка: элемент, отображаемый при наведении.
- усеченный: это логическое значение. Он определяет, будет ли содержимое ячейки завернуто или нет, чтобы предотвратить переполнение.
- значение: показывает значение в текстовом поле.
- wrapText: это логическое значение. Он определяет, будет ли содержимое ячейки завернуто или нет.
Реквизиты EditableName:
- className: это разделенный пробелами список имен классов для передачи дочернему элементу.
- index: указывает индекс столбца, уникальный идентификатор.
- намерение: определяет визуальное намерение цвета, применяемого к элементу.
- имя: указывает имя, отображаемое в текстовом поле.
- onCancel: это функция обратного вызова void, которая срабатывает при отмене редактирования.
- onChange: это функция обратного вызова void, которая срабатывает при редактировании.
- onConfirm: это функция обратного вызова void, вызываемая при подтверждении редактирования.
Синтаксис:
<EditableCell2>...</EditableCell2> <EditableName> ... </EditableName>
Создание приложения React и установка модуля:
Шаг 1: Создайте приложение React с помощью следующей команды:
npx create-react-app foldername
Шаг 2: После создания папки проекта, т. е. имени папки, перейдите к ней с помощью следующей команды:
cd foldername
Шаг 3: После создания приложения ReactJS установите необходимый модуль с помощью следующей команды:
npm install @blueprintjs/core npm install --save @blueprintjs/table
Структура проекта: Это будет выглядеть следующим образом.
Пример 1. В приведенном ниже примере мы создаем пользовательскую функцию с именем sampleColumn , которая вызывается через свойство columnHeaderRenderer компонента Column, которое возвращает компонент ColumnHeaderCell, который вызывает EditableNameComponent — пользовательскую функцию, которая возвращает компонент EditableName через свойство nameRenderer.
App.js
Javascript
import React from "react"import "@blueprintjs/core/lib/css/blueprint.css";import "@blueprintjs/table/lib/css/table.css";import { Column, Table, ColumnHeaderCell2, EditableName } from "@blueprintjs/table"; function App() { const sampleColumn = () => { return <ColumnHeaderCell2 nameRenderer={EditableNameComponent} /> }; const EditableNameComponent = () => { return <EditableName name="Edit Column Header"> </EditableName> }; return ( <div style={{ margin: 20 }}> <h1 style={{color:"green"}}>GeeksforGeeks</h1> <strong> ReactJS Blueprint Table features Editing </strong> <Table numRows={4}> <Column columnHeaderCellRenderer={sampleColumn} /> </Table> </div> );} export default App; |
Шаг для запуска приложения: Запустите приложение, используя следующую команду из корневого каталога проекта:
npm start
Вывод: теперь откройте браузер и перейдите по адресу http://localhost:3000/ , вы увидите следующий вывод:
Пример 2: мы импортируем {Column, Table, EditableCell2} из «@blueprintjs/table». Чтобы применить стили компонентов по умолчанию, мы импортируем «@blueprintjs/core/lib/css/blueprint.css» и «@blueprintjs/table/lib/css/table.css».
В этом примере пользовательская функция sampleData возвращает компонент EditableCell2, показывающий разные значения.
App.js
Javascript
import React from "react"import "@blueprintjs/core/lib/css/blueprint.css";import "@blueprintjs/table/lib/css/table.css";import { Column, Table, EditableCell2 } from "@blueprintjs/table"; function App() { const sampleData = (idx) => { return <EditableCell2 value={2 * idx * 100 + 3} /> }; return ( <div style={{ margin: 20 }}> <h1 style={{ color: "green" }}> GeeksforGeeks </h1> <strong> ReactJS Blueprint Table features Editing </strong> <Table numRows={5}> <Column name="ID" cellRenderer={sampleData} /> </Table> </div> );} export default App; |
Шаг для запуска приложения: Запустите приложение, используя следующую команду из корневого каталога проекта:
npm start
Вывод: теперь откройте браузер и перейдите по адресу http://localhost:3000/ , вы увидите следующий вывод:
Ссылка: https://blueprintjs.com/docs/#table/features.editing