update

src/components/ReactTable3/BasicTable.js

@@ -38,6 +38,9 @@ const BasicTable = () => {
     pageCount,
     setPageSize,
     prepareRow,
+    allColumns,
+    getToggleHideAllColumnsProps,
+    setColumnOrder,
     selectedFlatRows,
     state,
     setGlobalFilter,
@@ -47,6 +50,7 @@ const BasicTable = () => {
       data,
       // initialState: { pageIndex: 2 }
     },
+    useColumnOrder,
     useFilters,
     useGlobalFilter,
     useSortBy,
@@ -70,13 +74,40 @@ const BasicTable = () => {
     }
   );
 
+  const changeOrder = () => {
+    setColumnOrder([
+      "name",
+      "order-number",
+      "user-job",
+      "order-level",
+      "order-status",
+      "order-price",
+    ]);
+  };
+
   const { globalFilter, pageIndex, pageSize } = state;
   const firstPageRows = rows.slice(0, 10);
 
   return (
     <>
+      <div>
+        <div>
+          <Checkbox {...getToggleHideAllColumnsProps()} /> Toggle All
+        </div>
+        {allColumns.map((column) => (
+          <div key={column.id}>
+            <label>
+              <input type="checkbox" {...column.getToggleHiddenProps()} />
+              {column.Header}
+            </label>
+          </div>
+        ))}
+      </div>
+
       <GlobalFilter filter={globalFilter} setFilter={setGlobalFilter} />
 
+      <button onClick={changeOrder}> Change Column Order </button>
+
       <table
         {...getTableProps()}
         className="min-w-full divide-y divide-gray-200"