ShowCheckbox not working. How to render a checkbox?

[z9inn]

I have tried to get showCheckbox to work with no success.
I setup following https://adazzle.github.io/react-data-grid/docs/quick-start - this installed 7.0.0-beta.12
I then followed the sandbox code from https://adazzle.github.io/react-data-grid/docs/examples/row-selection.
The Checkbox column simply does not appear.
Can anyone help?

Code that I used in App.js

<ReactDataGrid
          columns={this.columns}
          rows={setGlobalMsgList}
          rowsCount={this.props.setGlobalMsgList.length}
          // onRowClick={this.onRowClick}
          onGridSort={this.handleGridSort}
          rowSelection={{
            showCheckbox: true,
            enableShiftSelect: true,
            onRowsSelected: this.onRowsSelected,
            onRowsDeselected: this.onRowsDeselected,
            selectBy: {
              indexes: this.state.selectedIndexes,
            },
          }}
          emptyRowsView={EmptyData}
/>

[iamravisingh]

@jeomrye you need to pass checkBoxFormater component to component props and in columns you need to pass SelectColumn
SelectColumn and CheckBoxFormatter component can be imported from the library itself

<ReactDataGrid
    columns={this.columns}
    rows={setGlobalMsgList}
    components: {
       checkboxFormatter: CheckboxFormatter,
      },
/>

[kevinvo]

Hey @iamravisingh

I looked at the demo code - https://github.com/adazzle/react-data-grid/tree/main/website/demos where checkboxes showed up but CheckboxFormatter was never used. I looked through the code and noticed CheckboxFormatterProps. Is this what you're referring to?
Also, how do you use CheckboxFormatterProps? Thanks!

[AjayZinngg]

I have the same question. Were you able to resolve this @kevinvo ?

[iamravisingh]

@AjayZinngg You are halfway through. Yes, you can use CheckboxFormatterProps which can be imported from react-data-grid
and you can pass create a customCheckboxFormatter by passing CheckboxFormatterProps
Below is the code which I am using for my case.

 version
"react-data-grid": "7.0.0-beta.12",

import { forwardRef, FC } from 'react';
import { CheckboxFormatterProps } from 'react-data-grid';
import Checkbox, { CheckboxTypes } from '@atomic/checkbox';
import Box from '@atomic/box';
import { IconCodes } from '@atomic/icon';
import { getFormatterBoxStyle, getCheckboxTextProps } from './helper';

export const CheckboxFormatter: FC<CheckboxFormatterProps> = forwardRef<
  HTMLInputElement,
  CheckboxFormatterProps
>(({ onChange, ...props }, ref) => {
  
  const  handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    onChange(e.target.checked, (e.nativeEvent as MouseEvent).shiftKey);
  }

  return (
    <Box {...getFormatterBoxStyle}>
      <Checkbox
        id=""
        ref={ref}
        size={22}
        type={CheckboxTypes.Square}
        icon={IconCodes.icon_Bd_Check}
        textProps={{...getCheckboxTextProps}}
        checked={props.checked}
        onChange={handleChange}
        {...props}
      />
    </Box>
  );
});

Hope this helps!
Cheers

[visshaljagtap]

@iamravisingh it is not working