React Table CSS Unit

Make the column.width of React Table v7 support various css units, such as '200px', '200%', '200vh', etc.

npm i react-table-css-unit

__Tips: It will cause plugins and features
that depend on the value caculation of column.wide invalid, such as useResizeColumns, etc.__

Documentation

Simple example

`js
import React, { useMemo } from 'react'
import ReactDom from 'react-dom'
import { useTable, useBlockLayout } from 'react-table'
import styled from 'styled-components'

import { useCssUnit } from 'react-table-css-unit'

const Styles = styled.div
padding: 1rem;

.table {
border: 1px solid #ddd;

.theader,
.tbody {
width: fit-content;
}

.th,
.td {
padding: 5px;
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
background-color: #fff;
overflow: hidden;
}
}

function Table() {
const data = useMemo(() => [...], [])
const columns = useMemo(() =>
[{
Header: '100px',
accessor: 'col0'
}, {
Header: '20%',
accessor: 'col1'
}, {
Header: '20vw',
accessor: 'col2'
}, {
Header: '30vh',
accessor: 'col3'
}, {
Header: '100', // 100px
accessor: 'col4'
}, {
Header: '20em',
accessor: 'col5'
}, {
Header: '20rem',
accessor: 'col6'
}].map(c => ({
...c,
width: c.Header
}))
, [])

const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
} = useTable(
{
data,
columns,
},
useBlockLayout,
useCssUnit,
)

return (