diff --git a/docs/dev_docs/tools/leaderboard.mdx b/docs/dev_docs/tools/leaderboard.mdx
index bb9b102..3a7e9c0 100644
--- a/docs/dev_docs/tools/leaderboard.mdx
+++ b/docs/dev_docs/tools/leaderboard.mdx
@@ -1,7 +1,12 @@
 # 排行榜
 
-在该页面中，您可以通过输入数据和配置表头的方式生成具有一定样式的排行榜供您分享。
-
 import Leaderboard from '@site/src/components/Leaderboard';
+import SimpleLeaderboard from '@site/src/components/SimpleLeaderboard';
+
+在该页面中，您可以通过输入数据和配置表头的方式生成具有一定样式的排行榜供您分享。
 
 <Leaderboard />
+
+下面为一个使用纯数据配置的排行榜，输入为一个 JSON 对象，包含 title、data 和 options 三个字段，分别对应表的标题、数据和表头配置。
+
+<SimpleLeaderboard />
diff --git a/i18n/en/code.json b/i18n/en/code.json
index 0f2bb29..0e6aaf9 100644
--- a/i18n/en/code.json
+++ b/i18n/en/code.json
@@ -358,6 +358,9 @@
   "leaderboard.headerType.NumberWithDelta": {
     "message": "Number with delta"
   },
+  "leaderboard.headerType.PureImage": {
+    "message": "Image"
+  },
   "leaderboard.submit": {
     "message": "Submit"
   },
diff --git a/i18n/zh/code.json b/i18n/zh/code.json
index 22d60dc..3fe1422 100644
--- a/i18n/zh/code.json
+++ b/i18n/zh/code.json
@@ -358,6 +358,9 @@
   "leaderboard.headerType.NumberWithDelta": {
     "message": "数字与变化"
   },
+  "leaderboard.headerType.PureImage": {
+    "message": "图片"
+  },
   "leaderboard.submit": {
     "message": "提交"
   },
diff --git a/src/components/Leaderboard/NumberWithDelta.tsx b/src/components/Leaderboard/NumberWithDelta.tsx
index 6550bc0..748d4bf 100644
--- a/src/components/Leaderboard/NumberWithDelta.tsx
+++ b/src/components/Leaderboard/NumberWithDelta.tsx
@@ -1,6 +1,7 @@
 import styles from './styles.module.css';
 
-const formatNumber = (num: number) => {
+const formatNumber = (num: any) => {
+  if (Number.isNaN(+num)) return 0;
   return +num.toFixed(2);
 }
 
diff --git a/src/components/Leaderboard/PureImage.tsx b/src/components/Leaderboard/PureImage.tsx
new file mode 100644
index 0000000..bd73fa4
--- /dev/null
+++ b/src/components/Leaderboard/PureImage.tsx
@@ -0,0 +1,15 @@
+import styles from './styles.module.css';
+
+interface PureImageProps {
+  url: string;
+  rounded?: boolean;
+}
+
+export const PureImage = ({ url, rounded }: PureImageProps) => {
+  return (
+    <div className={styles.nameContainer}>
+      {(url && url != '') ?
+        <img src={url} alt="" className={`${styles.icon} ${rounded ? styles.iconRounded : ''}`} /> : null}
+    </div>
+  )
+}
diff --git a/src/components/Leaderboard/index.tsx b/src/components/Leaderboard/index.tsx
index 62d294c..5f60f80 100644
--- a/src/components/Leaderboard/index.tsx
+++ b/src/components/Leaderboard/index.tsx
@@ -8,6 +8,7 @@ import { NameWithIcon } from './NameWithIcon';
 import { useReducer } from 'react';
 import { useReactTable, createColumnHelper, getCoreRowModel } from '@tanstack/react-table';
 import styles from './styles.module.css';
+import { PureImage } from './PureImage';
 
 export const COLUMN_TYPE_RULES: {
   name: string;
@@ -29,6 +30,11 @@ export const COLUMN_TYPE_RULES: {
       fieldsNeeded: 2,
       renderer: (num, delta) => <NumberWithDelta number={num} delta={delta} />,
     },
+    {
+      name: 'PureImage',
+      fieldsNeeded: 1,
+      renderer: (url) => <PureImage url={url} />,
+    }
   ];
 
 const helper = createColumnHelper<{ __index__: number }>();
diff --git a/src/components/SimpleLeaderboard/index.tsx b/src/components/SimpleLeaderboard/index.tsx
new file mode 100644
index 0000000..6ddbdb3
--- /dev/null
+++ b/src/components/SimpleLeaderboard/index.tsx
@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+import SimpleTable from '../SimpleTable';
+import styles from '../Leaderboard/styles.module.css';
+
+export default (): JSX.Element => {
+  const [title, setTitle] = useState<string>('');
+  const [data, setData] = useState<any[]>([]);
+  const [options, setOptions] = useState<any[]>([]);
+  const onDataInputBlur = e => {
+    try {
+      const inputValue = e.target.value;
+      const newData = inputValue ? JSON.parse(inputValue) : { title: '', data: [], options: [] };
+      setTitle(newData.title);
+      setData(newData.data);
+      setOptions(newData.options);
+    } catch {
+      alert('Not valid JSON');
+    }
+  };
+  return (
+    <div>
+      <div className={styles.inputRow}>
+        <input className={styles.dataInput} autoComplete='false' spellCheck='false' onBlur={onDataInputBlur} />
+      </div>
+      <SimpleTable title={title} data={data} options={options} />
+    </div>
+  );
+};