Sizing

Static width and height

To do size of grid static it requires to set width and height.


new FancyGrid({
  width: 300,
  height: 500
  ...

Responsive

To do grid responsive do not set width.


new FancyGrid({
  height: 500
  ...

Fit to content

To do grid size fit to content it needs to set value for height or width with value 'fit'


new FancyGrid({
  height: 'fit',
  width: 'fit'
  ...

Auto sizing columns

It is not required to set column width.
To fit all available columns width, it is used param flex
Flex auto-calc column width by fitting available width.


columns: [{
  index: 'company',
  title: 'Company'
}, {
  index: 'name',
  title: 'Name',
  sortable: true
}, {
  index: 'surname',
  title: 'Sur Name'
}, {
  index: 'age',
  title: 'Age',
  type: 'number',
  width: 50
}, {
  index: 'education',
  title: 'Education',
  flex: 1
}]

columns: [{
  index: 'company',
  title: 'Company'
}, {
  index: 'name',
  title: 'Name',
  sortable: true
}, {
  index: 'surname',
  title: 'Sur Name'
}, {
  index: 'age',
  title: 'Age',
  type: 'number',
  flex: 2
}, {
  index: 'education',
  title: 'Education',
  flex: 2
}]