Особенности React.js Blueprint Table Форматирование
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