1
0

WarnColumnWithoutDataIndex.tsx 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. import React from 'react';
  2. import { Table, Tooltip, Tag } from '../../index';
  3. function App() {
  4. const columns = [
  5. {
  6. title: 'Name',
  7. width: 150,
  8. fixed: true,
  9. filters: [
  10. {
  11. text: 'Code 45',
  12. value: '45',
  13. },
  14. {
  15. text: 'King 4',
  16. value: 'King 4',
  17. },
  18. ],
  19. onFilter: (value, record) => record.name.includes(value),
  20. },
  21. {
  22. title: 'Age',
  23. fixed: true,
  24. width: 150,
  25. sorter: (a, b) => (a.age - b.age > 0 ? 1 : -1),
  26. },
  27. {
  28. title: 'Address',
  29. width: 200,
  30. dataIndex: 'address',
  31. },
  32. {
  33. fixed: 'right' as const,
  34. width: 250,
  35. render: (text, record) => (
  36. <Tooltip content={record.description}>
  37. <Tag color="green">Show Info</Tag>
  38. </Tooltip>
  39. ),
  40. },
  41. ];
  42. const data = [];
  43. for (let i = 0; i < 10; i++) {
  44. const age = 40 + (Math.random() > 0.5 ? 1 : -1) * (i % 9);
  45. const name = `Edward King ${i}`;
  46. data.push({
  47. key: `${ i}`,
  48. name,
  49. age,
  50. address: `London, Park Lane no. ${i}`,
  51. description: `My name is ${name}, I am ${age} years old, living in New York No. ${i + 1} Lake Park.`,
  52. });
  53. }
  54. const tableProps = {
  55. pagination: false,
  56. columns,
  57. dataSource: data,
  58. };
  59. return (
  60. <Table
  61. {...tableProps}
  62. />
  63. );
  64. }
  65. export default App;