react-table-plugin-tutorial
v0.0.3
Published
```bash npm i react-table-plugin-tutorial ```
Downloads
266
Readme
React Table 插件开发与实践
安装
npm i react-table-plugin-tutorial
使用
在项目根目录中设置 i18n.js
import HttpBackend from "i18next-http-backend";
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
i18n
.use(HttpBackend)
.use(initReactI18next)
.init({
lng: "en",
fallbackLng: "en",
backend: {
loadPath: "/locales/{{lng}}/translation.json",
},
interpolation: {
escapeValue: false,
},
});
export default i18n;
在 public/locales/en/translation.json 以及 public/locales/zh_CN/translation.json 中设置翻译文件
public/locales/en/translation.json
{
"filter": "Filter",
"rowsPerPageLabel": "Rows per page",
"rowsPerPageSuffix": "",
"previousPage": "Previous",
"nextPage": "Next",
"totalPages": "Total {{total}} pages"
}
public/locales/zh_CN/translation.json
{
"filter": "过滤",
"rowsPerPageLabel": "每页显示",
"rowsPerPageSuffix": "条",
"previousPage": "上一页",
"nextPage": "下一页",
"totalPages": "共 {{total}} 页"
}
在项目中使用,App.jsx
import "./i18n";
import PluginManager from "react-table-plugin-tutorial";
import { Table } from "react-table-plugin-tutorial/components";
import { useState } from "react";
const columns = [
{ key: "id", label: "ID" },
{ key: "name", label: "Name" },
{ key: "age", label: "Age", render: (value) => <strong>{value}</strong> },
];
const initialData = [
{ id: 1, name: "John", age: 30 },
{ id: 2, name: "Jane", age: 25 },
{ id: 3, name: "Bob", age: 40 },
{ id: 4, name: "Alice", age: 35 },
{ id: 5, name: "Charlie", age: 28 },
{ id: 6, name: "David", age: 32 },
{ id: 7, name: "Eve", age: 27 },
{ id: 8, name: "Frank", age: 45 },
{ id: 9, name: "Grace", age: 33 },
{ id: 10, name: "Hannah", age: 29 },
{ id: 11, name: "Ivy", age: 31 },
{ id: 12, name: "Jack", age: 26 },
{ id: 13, name: "Kate", age: 34 },
{ id: 14, name: "Liam", age: 37 },
{ id: 15, name: "Mia", age: 24 },
{ id: 16, name: "Nina", age: 38 },
{ id: 17, name: "Oscar", age: 36 },
{ id: 18, name: "Penny", age: 30 },
{ id: 19, name: "Quinn", age: 25 },
{ id: 20, name: "Rachel", age: 39 },
];
const App = () => {
const [data, setData] = useState(initialData);
const plugins = PluginManager.initPlugins({ data, setData, columns });
return (
<>
<h1>React Table插件开发与实践</h1>
<Table columns={columns} data={data} plugins={plugins} />
</>
);
};
export default App;