FixAllColumnsWithoutWidth.tsx 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. import React from 'react';
  2. import { Table, Tooltip, Tag } from '../../index';
  3. function App() {
  4. const columns = [
  5. {
  6. title: 'Name',
  7. dataIndex: 'name',
  8. },
  9. {
  10. title: 'Age',
  11. dataIndex: 'age',
  12. },
  13. {
  14. title: 'Address',
  15. dataIndex: 'address',
  16. },
  17. {
  18. title: 'Description',
  19. dataIndex: 'description',
  20. },
  21. {
  22. dataIndex: 'x',
  23. render: (text, record) => (
  24. <Tooltip content={record.description}>
  25. <Tag color="green">Show Info</Tag>
  26. </Tooltip>
  27. ),
  28. },
  29. ];
  30. const data = [];
  31. for (let i = 0; i < 8; i++) {
  32. const age = (i * 1000) % 149 ;
  33. const name = `Edward King ${i}`;
  34. data.push({
  35. key: `${i}`,
  36. name,
  37. age,
  38. address: `London, Park Lane no. ${i}`,
  39. address2: `London, Park Lane no. ${i}`,
  40. description: `My name is ${name}`,
  41. });
  42. }
  43. const scroll = { y: 300 };
  44. return <Table bordered columns={columns} dataSource={data} scroll={scroll} pagination={false} />;
  45. }
  46. export default App;