京東又開源一款新框架，用起來真優(yōu)雅！

上一篇：2023 年 08 月編程語言排行榜，Julia 進(jìn)入前 20

今天推薦一款京東開源的、高效的企業(yè)級表格可視化搭建解決方案：DripTable！

DripTable 是京東零售推出的一款用于企業(yè)級中后臺(tái)的動(dòng)態(tài)列表解決方案，項(xiàng)目基于 React 和 JSON Schema，旨在通過簡單配置快速生成頁面動(dòng)態(tài)列表來降低列表開發(fā)難度、提高工作效率。

DripTable 目前包含以下子項(xiàng)目：drip-table、drip-table-generator。

各個(gè)子項(xiàng)目具體介紹如下：

• drip-table：動(dòng)態(tài)列表解決方案的核心庫，其主要能力是支持符合 JSON Schema 標(biāo)準(zhǔn)的數(shù)據(jù)自動(dòng)渲染列表內(nèi)容。

• drip-table-generator：一個(gè)可視化的用于 DripTable 配置 JSON Schema 標(biāo)準(zhǔn)的配置數(shù)據(jù)的生成工具。

優(yōu)勢

• 高效開發(fā)：提高前端列表開發(fā)效率，實(shí)現(xiàn) Lowcode 方式快速開發(fā)列表頁。
• 配置化渲染：以簡單的 JSON Schema 配置字段，自動(dòng)渲染處所需要的列表，降低用戶使用成本。
• 動(dòng)態(tài)可擴(kuò)展：支持自定義組件開發(fā)，通過API快速生成自定義的或者實(shí)現(xiàn)業(yè)務(wù)功能的單元格組件。
• 界面框架自由：表格界面框架支持多種主題包，另外還支持自定義主題包。

何時(shí)使用

• 用于中后臺(tái) CMS 列表頁的快速搭建，通過簡單 JSON Schema 數(shù)據(jù)即可生成列表，無需硬編碼。
• 用于 Lowcode 列表搭建的前端 Table 預(yù)覽以及實(shí)現(xiàn)，無需復(fù)雜前端代碼，便可實(shí)現(xiàn)自定義的列表。

開始使用

DripTable 分為兩種應(yīng)用場景：配置端和應(yīng)用端。配置端主要負(fù)責(zé)通過可視化方式和 low-code 方式進(jìn)行 JSON Schema 標(biāo)準(zhǔn)數(shù)據(jù)的生成。應(yīng)用端的職能則是將 JSON Schema 標(biāo)準(zhǔn)配置數(shù)據(jù)渲染成動(dòng)態(tài)列表。

配置端

1、安裝依賴

配置端依賴應(yīng)用端，安裝前先確保已安裝 drip-table。

「yarn」

yarn add drip-table-generator  

「npm」

npm install --save drip-table-generator  

2、在文件開頭引入依賴

import DripTableGenerator from "drip-table-generator";  
import "drip-table-generator/dist/index.min.css";  

3、在頁面中引用

return <DripTableGenerator />;  

配置端正常渲染效果如下：

應(yīng)用端

1、安裝依賴

安裝 drip-table：

「yarn」

yarn add drip-table  

「npm」

npm install --save drip-table  

2、在文件開頭引入依賴

// 引入 drip-table  
import DripTable from "drip-table";  
// 引入 drip-table 樣式  
import "drip-table/dist/index.min.css";  

3、引用

const schema = {  
  size: "middle",  
  columns: [  
    {  
      key: "columnKey",  
      title: "列標(biāo)題",  
      dataIndex: "dataIndexName",  
      component: "text",  
      options: {  
        mode: "single",  
      },  
    },  
  ],  
};  
return (  
  <DripTable  
    schema={schema}  
    dataSource={[]}  
  />  
);  

應(yīng)用端正常渲染效果如下：

開源地址：

   

    

     

      

       

        
PS：歡迎在留言區(qū)留下你的觀點(diǎn)，一起討論提高。如果今天的文章讓你有新的啟發(fā)，歡迎轉(zhuǎn)發(fā)分享給更多人。
       
      
     
    
   

      

       
熱門推薦：
       

        

         

          那些在一個(gè)公司死磕了5-10年的人，最后都怎么樣了？
          

         
        

         

          36歲被小米裁員，北郵碩士畢業(yè)，待過字節(jié)，阿里，現(xiàn)在只能去外包。。。
          

         
        

         

          航天院入兩萬，是一種什么體驗(yàn)！
          

         
        
最詳細(xì)的ChatGPT注冊與使用教程！

        
爆料下各司年終獎(jiǎng)

       
      

       

        PS：如果覺得我的分享不錯(cuò)，歡迎大家隨手點(diǎn)贊、轉(zhuǎn)發(fā)、在看