save the column width, sorts and filters

[Ofer-Gal]

I am looking to replace Ag-Grid but it has a feature I can’t do without. I did not see the option for columns to be resizable by user. Do you have it? My components refresh the data every 30 seconds, with Ag-Grid I can save the column width, sorts and filters before the redraw and can restore them after.

Will I be able to do it with react-smart-data-table?

[joaocarmo]

@Ofer-Gal there is, at the moment, no built-in mechanism to offer this feature. Having said that, it's possible to have control the width of each individual column through the unique selectors, e.g. for columns with the keys amount and price:

/* Set the width for the column `amount` */
.rsdt td[data-column-name='amount'] {
  width: 50px;
}

/* Set the width for the column `price` */
.rsdt td[data-column-name='price'] {
  width: 100px;
}

And here's another example.

Finally, it's just a matter of changing the CSS dynamically. See a rough proof of concept.

import { useState } from 'react'
import SmartDataTable from 'react-smart-data-table'

/* Rest of your logic... */

const MyDynamicTable = ({ data }) => {
  const [amountWidth, setAmountWidth] = useState(50);
  const [priceWidth, setPriceWidth] = useState(100);

  /* Rest of your logic... */

  return (
    <>
      <style>
        {`
          .rsdt td[data-column-name='amount'] {
            width: ${amountWidth}px;
          }
          .rsdt td[data-column-name='price'] {
            width: ${priceWidth}px;
          }
        `}
      </style>
      <SmartDataTable
        data={data}
        name="dynamic-table"
      />
    </>
  )
}