反应表:动态添加来自不同数据行的列数据

时间:2018-09-14 06:19:13

标签: reactjs react-table

我从服务器获取了这类数据:

"data":[
{"langcode":"fi","key_name":"company_signature","language_id":1,"language_key_id":549,"language_data":"Allekirjoitus","language_data_id":12740,"key_info":"1933 Email templates"},
{"langcode":"en","key_name":"company_signature","language_id":3,"language_key_id":549,"language_data":"Signature","language_data_id":14615,"key_info":"1933 Email templates"},
{"langcode":"fi","key_name":"group_signature","language_id":1,"language_key_id":550,"language_data":"Allekirjoitus","language_data_id":12741,"key_info":"1933 Email templates"},
{"langcode":"en","key_name":"group_signature","language_id":3,"language_key_id":550,"language_data":"Signature","language_data_id":14616,"key_info":"1933 Email templates"},
{"langcode":"fi","key_name":"company_domain","language_id":1,"language_key_id":551,"language_data":"Domain","language_data_id":12742,"key_info":"1933 Email templates"},
{"langcode":"en","key_name":"company_domain","language_id":3,"language_key_id":551,"language_data":"Domain","language_data_id":14617,"key_info":"1933 Email templates"}
]

这些是不同语言的翻译。最终用户决定他/她要加载多少种语言。对于每种翻译项目,每种语言都有自己的一行。每个翻译总是有一行

我想要显示这些的方式看起来像这样(比上面的数据示例多一种语言):

Translator tool view

是否有一些聪明的方法可以通过React-Table实现此目的,或者我应该创建一个函数来组合这些列,然后将其提供给React-Table:

"data":[
    {"key_info":"1933 Email templates","key_name":"company_signature","langcode_fi":"fi","language_id_fi":1,"language_key_id_fi":549,"language_data_fi":"Allekirjoitus","language_data_id_fi":12740,"langcode_en":"en","language_id_en":3,"language_key_id_en":549,"language_data_en":"Signature","language_data_id_en":14615},
    {"key_info":"1933 Email templates","key_name":"group_signature","langcode_fi":"fi","language_id_fi":1,"language_key_id_fi":550,"language_data_fi":"Allekirjoitus","language_data_id_fi":12741,"langcode_en":"en","language_id_en":3,"language_key_id_en":550,"language_data_en":"Signature","language_data_id_en":14616},
    {"key_info":"1933 Email templates","key_name":"company_domain","langcode_fi":"fi","language_id_fi":1,"language_key_id_fi":551,"language_data_fi":"Domain","language_data_id_fi":12742,"langcode_en":"en","language_id_en":3,"language_key_id_en":551,"language_data_en":"Domain","language_data_id_en":1461}
]

所有翻译列也需要可编辑。我曾尝试嵌套这些不同的语言数据,但是这会产生更多的问题和非常混乱的代码,因此我更喜欢一些更干净的解决方案。

0 个答案:

没有答案