Matable是一个高效便利的 XLSX文件转网页 的开源工具。
Matable支持自定义配置，支持各种检索模式，使用简单方便。
Matable是一个开源的项目，其使用了如下的开源项目
git clone https://github.com/shawroger/Matable.git
或者直接在一个目录准备一个data.xlsx和index.html文件，并在index.html中加入如下内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link href="/matable.css" rel="stylesheet" />
<title>Matable Demo</title>
</head>
<body>
<div id="root"></div>
<script src="/matable.js"></script>
<script>
const Matable = window.Matable;
const { createConf } = Matable;
const table01 = createConf(["data-01.xlsx", "Table 01"], {
name: "",
age: 0,
});
Matable.init({ copyright: true, title: "My Demo" })
.add(table01)
.render("#root");
</script>
</body>
</html>
所有的实例方法都支持链式操作
创建一个Matable实例
type ValidSearchMode = { key: string; val: string; weight: number }[];
type SearchConfig = {
mode: string | null | ValidSearchMode | string[];
able: boolean;
label: string;
$$val?: string;
sort: boolean;
};
interface Config {
data: string;
title: string;
index: boolean;
footer: boolean;
config: SearchConfig[];
removeFirstLine: boolean;
onLoadData: (data: Array<{ [p: string]: string }>) => void;
onChangePage: (page: number) => void;
onSortData: (
key?: string,
order?: 1 | -1
) => void | ((a: string, b: string) => number);
injectJson: (config: Config) => Record<string, string | number>;
meta: {
[key: string]: any;
};
}
Config是合法的Matable配置的数据，Matable用其来生成动态表单。
完整的Config类型比较复杂，因此一般使用createConf函数来创建一个Config类型数据。
渲染到指定的节点
export function createConf(
info: string | [string, string] | { [key: string]: string },
row: { [key: string]: RowData },
mergeConfig?: Partial<Config> | Record<string, number | string>
): Config;
创建一个合法的Matable数据配置
const { createConf } = Matable;
const table = createConf(
["$FILE.xlsx", "Table Title"],
{
/// 在后文说明 的RowData 配置
},
{
/// 自定义排序
onSortData(key) {
if (key === "age") {
return (a, b) => a - b;
}
},
}
);
export function createMode(row: {
[key: string]: RowData;
}): Partial<GlobalConfig>;
创建合法的Matable数据检索模式
即生成createConf的第二个函数参数。
const { createMode, Select } = Matable;
const mode = createMode({
姓名X: false, // 不显示此项，其实直接删去即可
姓名0: null, // 无检索模式
姓名1: "=", // 全字匹配
姓名2: "", // 部分匹配
姓名3: ">=", // 全字匹配 + 排序
姓名4: ">", // 部分匹配 + 排序
姓名5: 0, // 排序
姓名6: ["甲", "乙"], // 数据分类
姓名7: Select.from(["甲", "乙"]), // 数据分类 + 排序
});
export function parseMode(label: string, mode: RowData): SearchConfig;
生成一列的数据检索模式
const { parseMode } = Matable;
// 全字匹配 + 排序
const mode = parseMode("姓名", ">=");
resolveData 是实例上的一个运行时方法，允许在页面挂载后读取从config获取的数据。
export type ITableData = Array<{ [p: string]: string }>;
export function resolveData(config: Config): null | ITableData;
const matable = Matable.init({
/*...*/
})
.config(/*config*/ [conf_1])
.render("#root");
// 必须执行 render 后才可使用 `resolveData` 方法
const data_01 = matable.resolveData(conf_1);
Select 是一个静态类，提供了两个静态函数
export type SelectMapper = (
key: string,
index: number
) => {
key: string;
val: string;
weight: number;
};
export class Select {
static defaultMap: SelectMapper;
static from(arr: Array<string>, mapper: SelectMapper): ValidSearchMode;
static range(
fromTo: [number, number],
mapper: (n: number) => string
): ValidSearchMode;
}
将一个 string[] 转为一个 ValidSearchMode。
其最直接的应用是实现数据分类 + 排序的检索模式。
const { createMode, Select } = Matable;
const mode = createMode({
DEMO: Select.from(["A", "B", "C"]), // 数据分类 + 排序
});
提供一个快速生成序列的函数。
const { createMode, Select } = Matable;
const mode = createMode({
// 即为 ["1班", "2班", "3班",... ,"16班"]
班级: Select.range([1, 17], (i) => i + " 班"), // 数据分类 + 排序
});
再次感谢以下的开源项目，没有这些优秀的开源项目，也不可能有Matable的诞生
如果您对这个项目感兴趣的话，可以打赏来支持我，反正随缘。
FAQs
---
The npm package matable receives a total of 1 weekly downloads. As such, matable popularity was classified as not popular.
We found that matable demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.
Security News
require(esm) backported to Node.js 20, easing the transition to ESM-only packages and reducing complexity for developers as Node 18 nears end-of-life.
Security News
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.