feat: update table add searching

seb-oss · Dec 6, 2019 · 4015e13 · 4015e13
1 parent fe7fe4a
commit 4015e13
Show file tree

Hide file tree

Showing 2 changed files with 110 additions and 107 deletions.
diff --git a/develop/components/pages/TablePage.tsx b/develop/components/pages/TablePage.tsx
@@ -21,7 +21,8 @@ const TablePage: React.FunctionComponent = () => {
         () => [
             {
                 Header: "id",
-                accessor: "Id"
+                accessor: "id",
+                canSort: false
             },
             {
                 Header: "First Name",
@@ -39,14 +40,14 @@ const TablePage: React.FunctionComponent = () => {
                 Header: "Visits",
                 accessor: "visits",
             },
-            {
-                Header: "Status",
-                accessor: "status",
-            },
             {
                 Header: "Profile Progress",
                 accessor: "progress",
             },
+            {
+                Header: "Status",
+                accessor: "status",
+            },
         ],
         []
     );
@@ -70,12 +71,12 @@ const TablePage: React.FunctionComponent = () => {
                             columns={columns}
                             data={data}
                             sortable={true}
-                            useGroupBy={true}
                             setSelectAllValue={selectAll}
                             offsett={pageSize}
                             currentpage={paginationValue}
                             usePagination={true}
                             useRowSelection={true}
+                            onSort={(rows: Array<TableRow>, columnsOrg: Array<Column>) => { console.log(columnsOrg); }}
                             onRowSelection={(e: React.ChangeEvent<HTMLInputElement>, rows: Array<TableRow>) => { console.log(rows); setSelectedRow(rows); }}
                             onRowExpanded={(expandedRowsIndexes: Array<string>) => { console.log("the expanded ros are ", expandedRowsIndexes); }}
                             footer={