[TIL] 20211207 react-table editable/ fixed column/ css

1. react table editable 

https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/editable-data

tannerlinsley/react-table: editable-data - CodeSandbox

https://react-table.tanstack.com/docs/examples/editable-data

Examples: Editable Data

 

 

2. react input focus blur event

const inputRef = useRef();

const handleKeyPress = (e) => {
    if(e.key === 'Enter') {
      console.log('enter')
      inputRef.current.blur();
    }
  }

return <input 
            value={value} 
            onChange={onChange} 
            onBlur={onBlur} 
            css={inputStyle}
            onKeyPress={handleKeyPress}
            ref={inputRef}
            />

 

 

3. react-table fixed column

http://www.recompile.in/2019/11/react-fixed-table-header-code-without.html

https://codesandbox.io/s/react-table-fixed-columns-official-kowzlm5jp7

https://gojjc.tistory.com/entry/reactReact-Table-지정-컬럼-고정시키하기

[React] React-Table 지정 컬럼 고정시키하기

 

 

4. table view 에 border넣기

https://www.codingfactory.net/10510

CSS / 표(table) 꾸미기 / 테두리 만들기

 

 

5. editable table에서 input타입을 동적으로 렌더링 하고 싶음

// import makeData from './makeData'
const EditableCell = ({
  value : initialValue,
  row : {index},
  column : {id},
  updateMyData,
}) => {
  const [value, setValue ] = useState(initialValue);
  const [type, setType] = useState('type');
  const inputRef = useRef();
  const onChange = e => {
      setValue(e.target.value);
  }
  const onBlur = () => {
    updateMyData()
  }
  const handleKeyPress = (e) => {
    if(e.key === 'Enter') {
      inputRef.current.blur();
    }
  }
  useEffect(()=>{
      setValue(initialValue)
      setType(typeof value)
  },[initialValue])

  return <input 
            value={value} 
            onChange={onChange} 
            onBlur={onBlur} 
            css={inputStyle}
            onKeyPress={handleKeyPress}
            ref={inputRef}
            type={type}
            />
}