Ячейка JS API таблицы React.js Blueprint

Опубликовано: 19 Февраля, 2023

React.js Blueprint — это набор инструментов для пользовательского интерфейса. Он очень оптимизирован и популярен для создания сложных интерфейсов с высокой плотностью данных для настольных приложений.

Компонент таблицы позволяет пользователю отображать строки данных. Мы можем использовать следующий подход в ReactJS для использования компонента ReactJS Blueprint Table. Компонент Cell представляет каждую ячейку в таблице.

Сотовый реквизит:

cellRef: дескриптор ссылки для внешнего div.
Дети: Содержимое ячейки.
className: это список имен классов, разделенных пробелами, для передачи дочернему элементу.
интерактивный: это логическое значение. Он определяет, следует ли включить взаимодействие с мышью или нет.
columnIndex: указывает индекс столбца ячейки.
onKeyDown: функция обратного вызова, вызываемая, когда ячейка находится в фокусе и нажимается клавиша.
onKeyPress: функция обратного вызова, вызываемая при нажатии символьной клавиши.
onKeyUp: функция обратного вызова, вызываемая, когда ячейка находится в фокусе и клавиша отпускается.
цель: определяет цвет содержимого.
ключ: строковый объект.
загрузка: это логическое значение. Он определяет, находится ли он в состоянии загрузки или нет.
rowIndex: указывает индекс строки ячейки.
style: определяет стили CSS.
tabIndex: указывает индекс табуляции ячейки.
всплывающая подсказка: элемент, отображаемый при наведении.
усеченный: это логическое значение. Он определяет, будет ли содержимое ячейки завернуто или нет, чтобы предотвратить переполнение.
wrapText: это логическое значение. Он определяет, будет ли содержимое ячейки завернуто или нет.

Синтаксис:

<Cell> ... </Cell>

Условие:

Введение и установка ReactJS
Компонент таблицы ReactJS Blueprint

Создание приложения React и установка модуля:

Шаг 1: Создайте приложение React с помощью следующей команды:

npx create-react-app foldername

Шаг 2: После создания папки проекта, то есть имени папки, перейдите к ней с помощью следующей команды:

cd foldername

Шаг 3: После создания приложения ReactJS установите необходимый модуль с помощью следующей команды:

npm install @blueprintjs/core
npm install --save @blueprintjs/table

Структура проекта: Это будет выглядеть следующим образом.

Пример 1: мы импортируем {Столбец, Таблица, Ячейка} из «@blueprintjs/table». Чтобы применить стили компонентов по умолчанию, мы импортируем «@blueprintjs/core/lib/css/blueprint.css» и «@blueprintjs/table/lib/css/table.css».

Мы используем табличный компонент для отображения данных в виде таблицы, где numRows указывает количество строк, здесь мы показали два столбца с заголовками «Числа» и «Имена», в первый столбец передали нашу пользовательскую функцию sampleColumnOne, которая возвращает одна ячейка передает реквизиты загрузки и всплывающей подсказки, а во второй столбец пользовательская функция sampleColumnTwo возвращает ячейку с именем из списка через реквизит cellRenderer.

App.js

Javascript

import React from "react"
import "@blueprintjs/core/lib/css/blueprint.css";
import "@blueprintjs/table/lib/css/table.css";
import { Column, Cell, Table } from "@blueprintjs/table";
  
function App() {
  
    const sampleColumnOne = (index) => {
        return <Cell loading tooltip={index * 4 + 10}>sample data</Cell>
    };
    const names = ["Rob", "Bob", "Alice", "Ben", "Ten", "Rin"]
  
    const sampleColumnTwo = (index) => {
        return <Cell intent="danger"> {names[index]}</Cell>
    };
  
    return (
        <div style={{ margin: 30 }}>
            <h4>ReactJS Blueprint Table JS API Cell</h4>
            <Table numRows={6}>
                <Column name="Numbers"
                    cellRenderer={sampleColumnOne} />
                <Column name="Names"
                    cellRenderer={sampleColumnTwo} />
            </Table>
        </div>
    );
}
  
export default App;

Шаг для запуска приложения: Запустите приложение, используя следующую команду из корневого каталога проекта:

npm start

Вывод: теперь откройте браузер и перейдите по адресу http://localhost:3000/ , вы увидите следующий вывод:

Пример 2. В приведенном выше коде мы создаем две пользовательские функции, назвав их sampleColumnOne и sampleColumnTwo. В первой функции мы передаем свойство rowIndex, во втором мы передаем свойство truncate.

App.js

Javascript

import React from "react"
import "@blueprintjs/core/lib/css/blueprint.css";
import "@blueprintjs/table/lib/css/table.css";
import { Column, Cell, Table } from "@blueprintjs/table";
  
function App() {
  
    const sampleColumnOne = (index) => {
        return <Cell rowIndex={index}> {index * 100 + 6}</Cell>
    };
    const reviews = [" Reviews help customers to learn",
        "This is the best things on the internet",
        "Nice product, best to buy",
        "Good",
        "Nice one",
        "I have used the product quite a number of times."]
  
    const sampleColumnTwo = (index) => {
        return <Cell truncated> {reviews[index]}</Cell>
    };
  
    return (
        <div style={{ margin: 30 }}>
            <h4>ReactJS Blueprint Table JS API Cell</h4>
            <Table numRows={6}>
                <Column name="Id"
                    cellRenderer={sampleColumnOne} />
                <Column name="Product Reviews"
                    cellRenderer={sampleColumnTwo} />
            </Table>
        </div>
    );
}
  
export default App;

npm start

Вывод: теперь откройте браузер и перейдите по адресу http://localhost:3000/ , вы увидите следующий вывод:

Ссылка: https://blueprintjs.com/docs/#table/api.cell

Technical Scripter Picked

Ячейка JS API таблицы React.js Blueprint

Javascript

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ