diff --git a/docs/components/DocNode.vue b/docs/components/DocNode.vue
index 54fc9394..f1efbb2d 100644
--- a/docs/components/DocNode.vue
+++ b/docs/components/DocNode.vue
@@ -12,32 +12,32 @@
       <tbody>
         <tr>
           <td><strong>id</strong> (required)</td>
-          <td>Number | String</td>
+          <td class="type">Number | String</td>
           <td>Used to identify the option within the tree. It's value must be unique across all options.</td>
         </tr>
         <tr>
           <td><strong>label</strong> (required)</td>
-          <td>String</td>
+          <td class="type">String</td>
           <td>Used to display the option.</td>
         </tr>
         <tr>
           <td><strong>children</strong></td>
-          <td><code>node[]</code> | <code>null</code></td>
+          <td class="type"><code>node[]</code> | <code>null</code></td>
           <td>Declares a branch node. Set to empty array for no children options. Set to <code>null</code> for <a href="#delayed-loading">delayed loading</a>.</td>
         </tr>
         <tr>
           <td><strong>isBranch</strong></td>
-          <td>Boolean</td>
+          <td class="type">Boolean</td>
           <td>Useful for declaring an <a href="#delayed-loading">unloaded branch node</a>. For other cases, just use <code>children</code> instead.</td>
         </tr>
         <tr>
           <td><strong>isDisabled</strong></td>
-          <td>Boolean</td>
+          <td class="type">Boolean</td>
           <td>Used for disabling item selection. See <a href="#disable-item-selection">here</a> for detailed information.</td>
         </tr>
         <tr>
           <td><strong>isDefaultExpanded</strong></td>
-          <td>Boolean</td>
+          <td class="type">Boolean</td>
           <td>Whether the branch option should be expanded by default.</td>
         </tr>
       </tbody>
diff --git a/docs/components/DocProps.vue b/docs/components/DocProps.vue
index 2b4dd83b..ba68daff 100644
--- a/docs/components/DocProps.vue
+++ b/docs/components/DocProps.vue
@@ -3,16 +3,19 @@
     <thead>
       <tr>
         <th class="name">Name</th>
-        <th>Type</th>
-        <th>Default</th>
+        <th>Type / Default</th>
         <th class="desc">Description</th>
       </tr>
     </thead>
     <tbody>
       <tr v-for="prop in props" :key="prop[0]">
         <td><strong>{{ prop.name }}</strong></td>
-        <td class="nowrap" v-html="prop.type" />
-        <td v-html="prop.defaultValue" />
+        <td class="type">
+          <strong>Type:</strong> <span v-html="prop.type" />
+          <br>
+          <strong>Default:</strong> <span v-html="prop.defaultValue" />
+        </td>
+        <!-- <td v-html="prop.defaultValue" /> -->
         <td v-html="prop.description" />
       </tr>
     </tbody>
@@ -21,7 +24,7 @@
 
 <script>
   /* eslint-disable no-template-curly-in-string */
-  import { code, strong, link } from './utils'
+  import { code, strong, link, makeArgNameList } from './utils'
 
   const NO_DEFAULT_VALUE = '–'
 
@@ -134,17 +137,17 @@
         description: `Limit the display of selected options. The rest will be hidden within the ${code('limitText')} string.`,
       }, {
         name: 'limitText',
-        type: 'Function',
+        type: `Fn${makeArgNameList([ 'count' ])}`,
         defaultValue: code('count => `and ${count} more`'),
         description: 'Function that processes the message shown when selected elements pass the defined limit.',
       }, {
         name: 'loadChildrenErrorText',
-        type: 'Function',
+        type: `Fn${makeArgNameList([ 'error' ])}`,
         defaultValue: code('error => `Failed to load children options: ${error.message || String(error)}.`'),
         description: 'Function that processes error message shown when loading children options failed.',
       }, {
         name: 'loadChildrenOptions',
-        type: 'Function',
+        type: `Fn${makeArgNameList([ 'node', 'callback', 'id' ])}`,
         defaultValue: NO_DEFAULT_VALUE,
         description: `As the name suggests, it's used for dynamic loading options. See ${link('#delayed-loading')} for detailed information.`,
       }, {
@@ -154,7 +157,7 @@
         description: 'Text displayed when a branch node is loading its children options.',
       }, {
         name: 'loadRootOptions',
-        type: 'Function',
+        type: `Fn${makeArgNameList([ 'callback', 'id' ])}`,
         defaultValue: NO_DEFAULT_VALUE,
         description: `Used for delayed loading root options. See ${link('#delayed-loading')} for detailed information.`,
       }, {
@@ -189,7 +192,7 @@
         description: 'Text displayed when there are no matching search results.',
       }, {
         name: 'normalizer',
-        type: 'Function',
+        type: `Fn${makeArgNameList([ 'node', 'id' ])}`,
         defaultValue: code('node => node'),
         description: `Used for normalizing source data. See ${link('#customize-key-names')} for detailed information.`,
       }, {
diff --git a/docs/styles/docs.less b/docs/styles/docs.less
index 25ce02fa..12c98fdb 100644
--- a/docs/styles/docs.less
+++ b/docs/styles/docs.less
@@ -446,6 +446,11 @@ th.name {
   width: 9em;
 }
 
+td.type {
+  font-size: 0.9em;
+  line-height: 1.8em;
+}
+
 th.desc {
   width: 28em;
 }
@@ -457,10 +462,6 @@ label input[type="checkbox"] {
   margin-right: 4px;
 }
 
-.mark-required {
-  color: @palette-Red-600;
-}
-
 /* Sidebar */
 
 .sidebar-nav {