Особенности React.js Blueprint Table Форматирование

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

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

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

Чтобы отобразить длинное содержимое в ячейке, мы можем использовать компонент <TruncatedFormat2>, который позволяет пользователю отображать длинное содержимое ячейки по клику. А для отображения JSON-объектов на экране можно использовать компонент <JSONFormat2>.

Синтаксис:

<TruncatedFormat2 detectTruncation={true}></TruncatedFormat2>
<JSONFormat2 detectTruncation={true}></JSONFormat2>

Условие:

Введение и установка 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: мы импортируем { Column, Table, JSONFormat2, Cell} из «@blueprintjs/table». Чтобы применить стили компонентов по умолчанию, мы импортируем «@blueprintjs/core/lib/css/blueprint.css» и «@blueprintjs/table/lib/css/table.css».

Мы используем табличный компонент для отображения данных в виде таблицы, где numRows указывает количество строк, здесь мы показали два столбца с именами «Имя» и «Возраст» соответственно. Мы создаем две пользовательские функции с именами nameColumn и ageColumn, первая возвращает имена, а вторая возвращает возраст из списка объектов с именем data.

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, JSONFormat2 } 
    from "@blueprintjs/table";
  
function App() {
    const data = [
        {
            "name": "Rob",
            "age": 56,
  
        }, {
            "name": "Alice",
            "age": 60,
  
        }, {
            "name": "Bob",
            "age": 16,
  
        }
    ]
    const nameColumn = (id) => {
        return <Cell> <JSONFormat2>{data[id].name}</JSONFormat2></Cell>;
    };
    const ageColumn = (id) => {
        return <Cell> <JSONFormat2>{data[id].age}</JSONFormat2></Cell>;
    };
  
    return (
        <div style={{ margin: 30 }}>
            <h4>ReactJS Blueprint Table features Formatting</h4>
            <Table numRows={3}>
                <Column name="Name"
                    cellRenderer={nameColumn} />
                <Column name="Age"
                    cellRenderer={ageColumn} />
            </Table>
        </div>
    );
}
  
export default App;

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

npm start

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

Пример 2: мы импортируем { Column, Table, JSONFormat2, TruncatedFormat2, Cell} из «@blueprintjs/table». Чтобы применить стили компонентов по умолчанию, мы импортируем «@blueprintjs/core/lib/css/blueprint.css» и «@blueprintjs/table/lib/css/table.css».

Мы добавляем в таблицу три компонента столбца с именами «Имя», «Обзор» и «Информация JSON» соответственно, первый компонент остается таким же, как в приведенном выше примере.

Далее мы создали еще две пользовательские функции с именами reviewColumn и jsonInfoColumn, первая из которых возвращает обзоры в компоненте truncatedFormat2 с параметром detectTruncation, для которого установлено значение true, а вторая возвращает объект JSON через компонент JSONFormat2, для которого для параметра detectTruncation также установлено значение true.

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, JSONFormat2,
    TruncatedFormat2 } from "@blueprintjs/table";
  
function App() {
    const data = [
        {
            "name": "Rob",
            "age": 56,
            "review": "This is the best things on the internet"
  
        }, {
            "name": "Alice",
            "age": 60,
            "review": "I have used the product quite a number of times."
  
        }, {
            "name": "Bob",
            "age": 16,
            "review": "There is a technical issue with the device I bought."
  
        }
    ]
    const nameColumn = (id) => {
        return <Cell> <JSONFormat2>{data[id].name}</JSONFormat2></Cell>;
    };
    const reviewColumn = (id) => {
        return <Cell><TruncatedFormat2 detectTruncation={true}>
            {data[id].review}</TruncatedFormat2></Cell>;
    };
  
    const jsonInfoColumn = (id) => {
        return <Cell> <JSONFormat2 detectTruncation={true}>
            {data[id]}</JSONFormat2></Cell>;
    };
  
    return (
        <div style={{ margin: 30 }}>
            <h4>ReactJS Blueprint Table features Formatting</h4>
            <Table numRows={3}>
                <Column name="Name"
                    cellRenderer={nameColumn} />
                <Column name="Review"
                    cellRenderer={reviewColumn} />
                <Column name="JSON info"
                    cellRenderer={jsonInfoColumn} />
            </Table>
        </div>
    );
}
  
export default App;

npm start

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

Ссылка: https://blueprintjs.com/docs/#table/features.formatting

Technical Scripter Picked

Особенности React.js Blueprint Table Форматирование

Javascript

Javascript

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