diff --git a/index.json b/index.json
index 70e0204..c807584 100644
--- a/index.json
+++ b/index.json
@@ -73,9 +73,9 @@
   },
   "data-grid": {
     "react": true,
-    "version": "0.6.0",
+    "icon": true,
+    "version": "1.0.0",
     "style": true,
-    "icon": false,
     "test": true,
     "install": false,
     "dependencies": []
diff --git a/src/data-grid/CHANGELOG.md b/src/data-grid/CHANGELOG.md
new file mode 100644
index 0000000..e28f54f
--- /dev/null
+++ b/src/data-grid/CHANGELOG.md
@@ -0,0 +1,3 @@
+## 1.0.0 (12 Sep 2024)
+
+* feat: sortable icons
diff --git a/src/data-grid/icon.css b/src/data-grid/icon.css
new file mode 100644
index 0000000..dfa60cd
--- /dev/null
+++ b/src/data-grid/icon.css
@@ -0,0 +1,22 @@
+@font-face {
+  font-family: 'luna-data-grid-icon';
+  src: url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAScAAsAAAAAB4wAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAAFsAAACGIRcl5U9TLzIAAAFkAAAAPQAAAFZLxUkYY21hcAAAAaQAAADLAAACXsc5JZpnbHlmAAACcAAAACUAAAAwNxN2HmhlYWQAAAKYAAAALgAAADZzjr4QaGhlYQAAAsgAAAAYAAAAJAFyANhobXR4AAAC4AAAABAAAAA8AZAAAGxvY2EAAALwAAAAEAAAACAAnACobWF4cAAAAwAAAAAfAAAAIAEaAA9uYW1lAAADIAAAASkAAAIWm5e+CnBvc3QAAARMAAAATQAAAG8sD1gqeJxjYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiA2A9NMDGwMMkCSCyjDCmSzA8W4GXgYeBn4wPIIUU6gGkYgZAYAUCsGPwB4nGNgZJBmnMDAysDAUMfQAyRloHQCAyeDMQMDEwMrMwNWEJDmmsJwgEH3IxPDCSBXCEwyMDCCCABbKQhrAAAAeJzNkk0KAjEMRl87/s84iAsX4hH0UKJuVWTE67jyDF5rTqBf2iCIILgz4Q30mzZpkgJdoBBL0YFwI2B2lRqSXjBKeodG6ykTKZEVa3YcOXHm0sbHQ/9M27CX1kgLSXu3oPPmM+byhRwGilxQ0qOmUq4ufYaMtTfqQO8jxncb/LifVHdRvvLUVbqC3eBfrErfu69qrNMZq3btaHrqfsYmunVKsXOsyr1jcQ6OZTg6mrYmmLHX0Th9cXaG4uKoT23I2ItpY4b4BCc0HqgAeJxjYGQAgZUM0xmYGBjMlc1XNjv6ewBF0MTFgeLTgeIApVwH2QAAAHicY2BkYGAAYg6x1J54fpuvDNwMJ4ACUZyP9zUgaCBYyTAdSHIwMIE4ABfKCdgAAHicY2BkYGA4wcAAJ1cyMDKgAn4AOLICS3icY2AAghNQTCIAAFMMAZF4nGNgAAIeBglcEAARPAFFeJxjYGRgYOBnYGYA0QwMTEDMBYQMDP/BfAYACkEBKgB4nGWQPW7CQBSEx2BIAlKCFCkps1UKIpmfkgNAT0GXwpi1MbK91npBossJcoQcIaeIcoIcKGPzaGAtP38zb97uygAG+IWHenm4bWq9WrihOnGb9CDsk5+FO+jjRbhLfyjcwxumwn084p07eP4dnQFK4Rbu8SHcpv8p7JO/hDt4wrdwl/6PcA8r/An38eoN08gUsSncUif7LLRnef6utK1SU6hJMD5bC11oGzq9Ueujqg7J1LlYxdbkas6uzjKjSmt2OnLB1rlyNhrF4geRyZEigkGBuKkOS2gk2CNDCHvVvdQrpi0q+rVWmCDA+Cq1YKpokiGVxobJNY6sFQ48bUrXMa34Ws7kpLnMat4kIyv+77q3oxPRD7BtpkrMMOITX+SD5g75Pz0RXqgAAAB4nF3GOQ6AIBQA0T+44YoX4VAEaNEYCNe3IDa+ZkaUNF//DIqOnoGRCc3MwsrGzoHhFO3dE7Mt99ImXDXhcTxEMpbCTeCikkRebQwMtgAAAA==')
+    format('woff');
+}
+
+[class^='icon-'],
+[class*=' icon-'] {
+  display: inline-block;
+  font-family: 'luna-data-grid-icon' !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-caret-up:before {
+  content: '\f101';
+}
+.icon-caret-down:before {
+  content: '\f102';
+}
diff --git a/src/data-grid/icon/caret-up.svg b/src/data-grid/icon/caret-up.svg
new file mode 100644
index 0000000..871d1e1
--- /dev/null
+++ b/src/data-grid/icon/caret-up.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   t="1606647008187"
+   class="icon"
+   viewBox="0 0 1024 1024"
+   version="1.1"
+   p-id="1295"
+   width="200"
+   height="200"
+   id="svg107"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <path
+     d="M 863.322,621.18677 H 194.10839 L 528.67733,251.675 Z"
+     p-id="1296"
+     id="path105" />
+</svg>
diff --git a/src/data-grid/icon/icon.json b/src/data-grid/icon/icon.json
new file mode 100644
index 0000000..4aa7db3
--- /dev/null
+++ b/src/data-grid/icon/icon.json
@@ -0,0 +1 @@
+["../../share/icon/caret-down.svg"]
diff --git a/src/data-grid/index.ts b/src/data-grid/index.ts
index 84874b7..98a6504 100644
--- a/src/data-grid/index.ts
+++ b/src/data-grid/index.ts
@@ -136,7 +136,6 @@ export default class DataGrid extends Component<IOptions> {
     if (maxHeight < minHeight) {
       this.setOption('maxHeight', minHeight)
     }
-    ;('width')
     this.initTpl()
     this.$headerRow = this.find('.header').find('tr')
     this.$fillerRow = this.find('.filler-row')
@@ -331,6 +330,17 @@ export default class DataGrid extends Component<IOptions> {
         const isAscending = order !== 'descending'
         $this.data('order', isAscending ? 'descending' : 'ascending')
 
+        $headerRow.find(c('.icon-caret-up')).hide()
+        $headerRow.find(c('.icon-caret-down')).hide()
+
+        const $iconUp = $this.find(c('.icon-caret-up'))
+        const $iconDown = $this.find(c('.icon-caret-down'))
+        if (isAscending) {
+          $iconUp.show()
+        } else {
+          $iconDown.show()
+        }
+
         self.sortNodes(id, isAscending)
 
         $headerRow.find('th').each(function (this: HTMLTableCellElement) {
@@ -488,7 +498,12 @@ export default class DataGrid extends Component<IOptions> {
     each(this.options.columns, (column) => {
       const title = escape(column.title)
       if (column.sortable) {
-        html += c(`<th class="sortable" data-id="${column.id}">${title}</th>`)
+        html += c(`
+          <th class="sortable" data-id="${column.id}">
+            ${title}
+            <span class="icon-caret-up"></span>
+            <span class="icon-caret-down"></span>
+          </th>`)
       } else {
         html += `<th>${title}</th>`
       }
diff --git a/src/data-grid/package.json b/src/data-grid/package.json
index 42ffb40..52a5a65 100644
--- a/src/data-grid/package.json
+++ b/src/data-grid/package.json
@@ -1,8 +1,9 @@
 {
   "name": "data-grid",
-  "version": "0.6.0",
+  "version": "1.0.0",
   "description": "Grid for displaying datasets",
   "luna": {
-    "react": true
+    "react": true,
+    "icon": true
   }
 }
diff --git a/src/data-grid/story.js b/src/data-grid/story.js
index 784bc2e..45a3e30 100644
--- a/src/data-grid/story.js
+++ b/src/data-grid/story.js
@@ -2,6 +2,7 @@ import 'luna-data-grid.css'
 import DataGrid from 'luna-data-grid'
 import story from '../share/story'
 import readme from './README.md'
+import changelog from './CHANGELOG.md'
 import each from 'licia/each'
 import toEl from 'licia/toEl'
 import LunaDataGrid from './react'
@@ -40,6 +41,7 @@ const def = story(
   },
   {
     readme,
+    changelog,
     source: __STORY__,
     ReactComponent() {
       const { columns, minHeight, maxHeight, filter } = createKnobs()
diff --git a/src/data-grid/style.scss b/src/data-grid/style.scss
index aa1adf9..9ea17b4 100644
--- a/src/data-grid/style.scss
+++ b/src/data-grid/style.scss
@@ -33,12 +33,22 @@
     border-bottom: 1px solid $color-border;
     text-align: left;
     background: $color-fill-secondary;
+    position: relative;
     &.sortable {
+      padding-right: $padding-s-m;
       &:hover,
       &:active {
         background: #e6e6e6;
       }
     }
+    .icon-caret-down,
+    .icon-caret-up {
+      font-size: 12px;
+      position: absolute;
+      display: none;
+      top: 6px;
+      right: 2px;
+    }
   }
 
   td {