css - ReactTable コンポーネントの固定列

Question

小さいページで横方向の列を取得した場合、列を修正できますか?

たとえばfirstName、この例の列を修正できますか。

乾杯！！

Answer 1

以下のことを試してみてください。

React では、コンポーネント自体の CSS 部分:

fix: { 
 position: 'sticky',
 right: 0,
 padding: '11px 16px',
 boxShadow: '0px 4px 4px 0px #999',
},
fixColumn: {        
 position: 'sticky',       
 right: 0,
},

私の場合 - Material-UI DataTable

<MuiTable component="table" {...getProps()}>
          <TableHead>
            {headerGroups.map(prop => (
              <TableRow {...prop.getAllHeaderProps()}>
                {prop.headers.map((column, index) => {
                  const fixColIndex = column.id === 'column_id_need_to_fix' ? index : '';);
                  const fixHeaderProps = column.getHeaderProps({
                    className: clsx({ [classes.fixColumn]: fixColIndex }, column.className),
                  });return (
                <TableCell {...fixHeaderProps}></TableCell>
              );
            })}
          </TableRow>
        ))}
      </TableHead>

TableBody の下

const Props = props.getProps({
                    className: clsx(
                      {
                        [classes.fix]: props.column.id === fixColumnId,
                      },
                    ),
                  });
                  return (
                    <TableCell {...Props}>
                      {prop.render('Cell')}
                    </TableCell>
                  );