v5.3.8

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netdata/charts",
-  "version": "5.3.7",
+  "version": "5.3.8",
   "description": "Netdata frontend SDK and chart utilities",
   "main": "dist/index.js",
   "module": "dist/es6/index.js",

src/components/table/index.js

@@ -108,7 +108,7 @@ const Dimensions = () => {
 
   const chart = useChart()
   const groups = chart.getDimensionGroups()
-  const tableColumns = chart.getAttribute("tableColumns")
+  const { tableColumns, tableSortBy } = chart.getAttributes()
 
   const [rowGroups, contextGroups, labels] = useMemo(() => {
     let forRows = []
@@ -147,6 +147,19 @@ const Dimensions = () => {
     contextGroups,
   })
 
+  const sortBy = useMemo(() => {
+    if (!tableSortBy || tableSortBy.length > 1 || !contextGroups) return tableSortBy
+
+    const [first] = tableSortBy
+    if (!first || !contextGroups[first.id] || !Object.keys(contextGroups[first.id]))
+      return tableSortBy
+
+    return Object.keys(contextGroups[first.id]).map(id => ({
+      id: `value${first.id}${id}`,
+      desc: first.desc,
+    }))
+  }, [tableSortBy, contextGroups])
+
   const hoverRef = useHover(
     {
       onHover: chart.focus,
@@ -188,7 +201,7 @@ const Dimensions = () => {
       // onRowSelected={onItemClick}
       // onSearch={noop}
       // meta={meta}
-      // sortBy={sortBy}
+      sortBy={sortBy}
       // rowSelection={rowSelection}
       // onSortingChange={onSortByChange}
       // expanded={expanded}