Блог

Главная - Вопросы по программированию - Как добавить строку в табулятор в react и извлечь данные

Как добавить строку в табулятор в react и извлечь данные

#javascript #reactjs #tabulator

#javascript #reactjs #табулятор

Вопрос:

Я использую библиотеку react-tabulator и хочу знать, как я могу добавлять новые строки после создания моего табулятора. Желательно с помощью кнопки под табулятором, которая позволяет добавлять строку каждый раз, когда вы нажимаете на нее.

Я также хочу знать, как я могу извлечь содержимое моего табулятора в вывод или строку JSON после того, как я добавил свои строки и остался доволен содержимым

Комментарии:

1. не могли бы вы опубликовать ссылку на скрипку JS, которая демонстрирует вашу текущую настройку, после чего мы сможем дать вам более точные указания

Ответ №1:

Добавление строк

Предполагая, что вы передали массив данных в таблицу, вы должны просто иметь возможность помещать объекты строк в этот массив, а затем Tabulator автоматически распознает изменения и отобразит их:

Итак, предполагая, что у вас есть настройка, аналогичная руководству по настройке Tabulator React

где вы определили свой массив данных:

 var data = [
  {id:1, name:"Oli Bob", age:"12", col:"red", dob:""},
  {id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982"},
  {id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},
  {id:4, name:"Brendon Philips", age:"125", col:"orange", dob:"01/08/1980"},
  {id:5, name:"Margret Marmajuke", age:"16", col:"yellow", dob:"31/01/1999"},
];

А затем передал его в компонент tabulator, когда вы создали его экземпляр:

 <ReactTabulator
 data={data}
 columns={columns}
 tooltips={true}
 layout={"fitData"}
 />

Затем добавить строку в таблицу так же просто, как вставить новый объект в существующий массив данных:

 data.push({id:6, name:"Billy Jim", age:33, col:"pink", dob:"16/07/1995"});

Данные в формате JSON

Чтобы превратить ваш массив в json, вы можете использовать встроенную JSON.stringify функцию vanilla JS:

 var jsonData = JSON.stringify(data);
Метки: