fix(DevicesTable): split IEEE address and short address

nurikk · Mar 13, 2022 · 8faeb0b · 8faeb0b
1 parent f9499f5
commit 8faeb0b
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 13 deletions.
diff --git a/src/components/grid/ReactTableCom.tsx b/src/components/grid/ReactTableCom.tsx
@@ -48,10 +48,10 @@ const persist = debounce((key: string, data: Record<string, unknown>): void => {
 
 
 const stateReducer = (
-    newState: TableState<Record<string, unknown>>,
-    action: ActionType,
-    previousState: TableState<Record<string, unknown>>,
-    instance?: TableInstance<any>): TableState<Record<string, unknown>> => {
+  newState: TableState<Record<string, unknown>>,
+  action: ActionType,
+  previousState: TableState<Record<string, unknown>>,
+  instance?: TableInstance<any>): TableState<Record<string, unknown>> => {
   if (instance) {
     const { instanceId } = instance;
     const { sortBy, globalFilter } = newState;
@@ -101,6 +101,7 @@ export const Table: React.FC<Props> = ({ columns, data, id }) => {
         </tr>
         {headerGroups.map((headerGroup: HeaderGroup<Record<string, unknown>>) => (
           <tr {...headerGroup.getHeaderGroupProps()}>
+            <th className="text-nowrap">#</th>
             {headerGroup.headers.map(column => (
               <th className="text-nowrap" {...column.getHeaderProps(column.getSortByToggleProps())}>
                 <span className={cx({ 'btn-link me-1': column.canSort })}>{column.render('Header')}</span>
@@ -123,6 +124,7 @@ export const Table: React.FC<Props> = ({ columns, data, id }) => {
             prepareRow(row);
             return (
               <tr {...row.getRowProps()}>
+                <td><div className="font-weight-bold">{i + 1}</div></td>
                 {row.cells.map(cell => <td {...cell.getCellProps()}>{cell.render('Cell')}</td>)}
               </tr>
             )

diff --git a/src/components/zigbee/DevicesTable.tsx b/src/components/zigbee/DevicesTable.tsx
@@ -41,12 +41,7 @@ export function DevicesTable(props: DevicesTableProps) {
         },
     }] : [];
     const columns = [
-        {
-            id: 'number',
-            Header: '#',
-            Cell: ({ row }: CellProps<DevicesPageData>) => <div className="font-weight-bold">{row.index + 1}</div>,
-            disableSortBy: true,
-        },
+
         {
             id: 'pic',
             Header: t('pic'),
@@ -67,7 +62,7 @@ export function DevicesTable(props: DevicesTableProps) {
             id: 'ieee_address',
             Header: t('ieee_address'),
             accessor: ({ device }) => [device.ieee_address, toHex(device.network_address, 4)].join(' '),
-            Cell: ({ row: { original: { device } } }) => <>{device.ieee_address} ({toHex(device.network_address, 4)})</>,
+            Cell: ({ row: { original: { device } } }) => <><div>{device.ieee_address}</div><div>({toHex(device.network_address, 4)})</div></>,
         },
         {
             id: 'manufacturer',
@@ -99,8 +94,8 @@ export function DevicesTable(props: DevicesTableProps) {
             id: 'controls',
             Header: '',
             Cell: ({ row: { original: { device, state } } }) => {
-                return <DeviceControlGroup 
-                device={device} state={state} 
+                return <DeviceControlGroup
+                    device={device} state={state}
                 />
             },
             disableSortBy: true,