Как я могу динамически контролировать ширину столбца таблицы реагировать bootstrap -таблица-следующий?

Question

Ниже показано, как выглядит моя таблица в коде. Как я могу контролировать каждый столбец и сделать их разной ширины?

  { id: 1, name: "Item 1", price: 100 },
  { id: 2, name: "Item 2", price: 102 }
];

const ProductList = props => {
  const columns = [
    {
      dataField: "id",
      text: "Product ID"
    },
    {
      dataField: "name",
      text: "Product Name"
    },
    {
      dataField: "price",
      text: "Product Price"
    }
  ];
  return (
    <div style={{ padding: "20px" }}>
      <h1 className="h2">Products</h1>
      <BootstrapTable keyField="id" data={products} columns={columns} />
    </div>
  );
};```

Answer 1

Просто дайте width columns

const columns = [
    {
      dataField: "id",
      text: "Product ID",
      style:{'width' : '90px'}
    },
    {
      dataField: "name",
      text: "Product Name",
      style:{'width' : '90px'}
    },
    {
      dataField: "price",
      text: "Product Price",
      style:{'width' : '90px'}
    }
  ];

Answer 2

Во время серфинга и поиска решения я наткнулся на их хорошо документированную do c страницу . Вначале меня смущало имя реагировать bootstrap таблица-следующий : оно хорошо известно как реагирование bootstrap таблица 2.

Итак, для управления шириной для столбца таблицы реакции- bootstrap -table-next необходимо добавить классы реквизитов для внешнего оформления или в стиль для использования встроенного стиля. Оба реквизита имеют возможность использовать функцию обратного вызова, чтобы лучше манипулировать ею.

Код теперь будет выглядеть следующим образом:

Здесь мы манипулируем шириной первого столбца:

const ProductList = props => {
  const columns = [
    {
      dataField: "id",
      text: "Product ID",
style: {
    width: '12em',
  }
    },
    {
      dataField: "name",
      text: "Product Name"
    },
    {
      dataField: "price",
      text: "Product Price"
    }
  ];
  return (
    <div style={{ padding: "20px" }}>
      <h1 className="h2">Products</h1>
      <BootstrapTable keyField="id" data={products} columns={columns} />
    </div>
  );
};

Сборник рассказов довольно прост.