table can resize

Maginaaa · Jun 1, 2023 · 4a0771c · 4a0771c
1 parent ebcf2bc
commit 4a0771c
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 16 deletions.
diff --git a/web/client/src/App.tsx b/web/client/src/App.tsx
@@ -203,14 +203,14 @@ class App extends React.Component<IProps, IState> {
  <Table striped bordered size="sm" style={{ tableLayout: 'fixed' }}>
  <thead>
  <tr>
- <Resizer width='50px'>No</Resizer>
- <th style={{ width: '80px' }}>Method</th>
- <th style={{ width: '250px' }}>Host</th>
- <th style={{ width: 'auto' }}>Path</th>
- <th style={{ width: '150px' }}>Type</th>
- <th style={{ width: '80px' }}>Status</th>
- <th style={{ width: '90px' }}>Size</th>
- <th style={{ width: '90px' }}>Time</th>
+ <Resizer width={50}>No</Resizer>
+ <Resizer width={80}>Method</Resizer>
+ <Resizer width={250}>Host</Resizer>
+ <Resizer width={500}>Path</Resizer>
+ <Resizer width={150}>Type</Resizer>
+ <Resizer width={80}>Status</Resizer>
+ <Resizer width={90}>Size</Resizer>
+ <Resizer width={90}>Time</Resizer>
  </tr>
  </thead>
  <tbody>

diff --git a/web/client/src/components/Resizer.tsx b/web/client/src/components/Resizer.tsx
@@ -2,23 +2,44 @@ import React from 'react'
 
 // https://htmldom.dev/resize-columns-of-a-table/
 
-interface Iprops {
- children: React.ReactNode;
- width: string;
+interface IProps {
+ children: React.ReactNode
+ width: number
 }
 
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-interface IState {}
+interface IState {
+ width: number
+}
 
-class Resizer extends React.Component<Iprops, IState> {
+class Resizer extends React.Component<IProps, IState> {
  x = 0
  w = 0
 
+ constructor(props: IProps) {
+ super(props)
+ this.state = {
+ width: props.width
+ }
+
+ this.mouseMoveHandler = this.mouseMoveHandler.bind(this)
+ this.mouseUpHandler = this.mouseUpHandler.bind(this)
+ }
+
+ mouseMoveHandler(e: any) {
+ const dx = e.clientX - this.x
+ this.setState({ width: this.w + dx })
+ }
+
+ mouseUpHandler() {
+ document.removeEventListener('mousemove', this.mouseMoveHandler)
+ document.removeEventListener('mouseup', this.mouseUpHandler)
+ }
+
  render() {
  return (
  <th
  style={{
- width: this.props.width,
+ width: `${this.state.width}px`,
  position: 'relative',
  }}
  >
@@ -34,7 +55,11 @@ class Resizer extends React.Component<Iprops, IState> {
  userSelect: 'none',
  }}
  onMouseDown={(e) => {
- // this.x = e.clientX
+ this.x = e.clientX
+ this.w = this.state.width
+
+ document.addEventListener('mousemove', this.mouseMoveHandler)
+ document.addEventListener('mouseup', this.mouseUpHandler)
  }}
  ></div>
  </th>