Hola, ¿cómo puedo agregar una nueva columna con casillas de verificación para cada fila en el lado izquierdo de mi columna de id ?
export default function Display() { const { menus } = JsonData; const data = useMemo( () => [ { Header: "Id", // accessor: "id" accessor: (row) => row.id }, { Header: "Title", accessor: (row) => ({ title: row.title, id: row.id }), Cell: ({ value }) => ( <Link to={{ pathname: `/menu/${value.id}` }}>{value.title}</Link> ) } ], [] ); return ( <Table data={menus} columns={data} withCellBorder withRowBorder withSorting withPagination /> ); }Aquí está mi códigoSandbox
Simplemente agregue una nueva entrada en la matriz:
export default function Display() { const { menus } = JsonData; const data = useMemo( () => [ { Header: "Ceckbox", // accessor: "id" accessor: (row) => row.id, Cell: ({ value }) => ( <input type='checkbox' /> ) }, { Header: "Id", // accessor: "id" accessor: (row) => row.id }, { Header: "Title", accessor: (row) => ({ title: row.title, id: row.id }), Cell: ({ value }) => ( <Link to={{ pathname: `/menu/${value.id}` }}>{value.title}</Link> ) } ], [] ); return ( <Table data={menus} columns={data} withCellBorder withRowBorder withSorting withPagination /> ); }Puede agregar una nueva columna a sus datos:
const data = useMemo( () => [ { id: "check", accessor: (row) => row.title, Cell: ({ value }) => <input type="checkbox" value={value} /> }, { Header: "Id", // accessor: "id" accessor: (row) => row.id }, { Header: "Title", // accessor: "title" accessor: (row) => ({ title: row.title, id: row.id }), // accessor: (row) => ( // <Link to={{ pathname: `/menu/${row.id}` }}>{row.title}</Link> // ) // Link the content of my cell. NOT WORKING //Cell: ({ row }) => ( //<Link to={{ pathname: `/menu/${row.id}` }}>{row.title}</Link> //) Cell: ({ value }) => ( <Link to={{ pathname: `/menu/${value.id}` }}>{value.title}</Link> ) } ], [] );