import React from "react"; import { Table, Card, Layout, Icon } from "@tencent/tea-component"; const { Body, Content } = Layout; const { pageable, scrollable } = Table.addons; function TableLayoutExample() { return ( (x.completed ? : null), }, ]} addons={[ pageable(), scrollable({ maxHeight: 480, scrollToTopOnChange: true }), ]} /> ); } export default function Demo() { return (
); } const data = [ { userId: 1, id: 1, title: "delectus aut autem", completed: false, }, { userId: 1, id: 2, title: "quis ut nam facilis et officia qui", completed: false, }, { userId: 1, id: 3, title: "fugiat veniam minus", completed: false, }, { userId: 1, id: 4, title: "et porro tempora", completed: true, }, { userId: 1, id: 5, title: "laboriosam mollitia et enim quasi adipisci quia provident illum", completed: false, }, { userId: 1, id: 6, title: "qui ullam ratione quibusdam voluptatem quia omnis", completed: false, }, { userId: 1, id: 7, title: "illo expedita consequatur quia in", completed: false, }, { userId: 1, id: 8, title: "quo adipisci enim quam ut ab", completed: true, }, { userId: 1, id: 9, title: "molestiae perspiciatis ipsa", completed: false, }, { userId: 1, id: 10, title: "illo est ratione doloremque quia maiores aut", completed: true, }, { userId: 1, id: 11, title: "vero rerum temporibus dolor", completed: true, }, { userId: 1, id: 12, title: "ipsa repellendus fugit nisi", completed: true, }, { userId: 1, id: 13, title: "et doloremque nulla", completed: false, }, { userId: 1, id: 14, title: "repellendus sunt dolores architecto voluptatum", completed: true, }, { userId: 1, id: 15, title: "ab voluptatum amet voluptas", completed: true, }, { userId: 1, id: 16, title: "accusamus eos facilis sint et aut voluptatem", completed: true, }, { userId: 1, id: 17, title: "quo laboriosam deleniti aut qui", completed: true, }, { userId: 1, id: 18, title: "dolorum est consequatur ea mollitia in culpa", completed: false, }, { userId: 1, id: 19, title: "molestiae ipsa aut voluptatibus pariatur dolor nihil", completed: true, }, { userId: 1, id: 20, title: "ullam nobis libero sapiente ad optio sint", completed: true, }, { userId: 2, id: 21, title: "suscipit repellat esse quibusdam voluptatem incidunt", completed: false, }, { userId: 2, id: 22, title: "distinctio vitae autem nihil ut molestias quo", completed: true, }, { userId: 2, id: 23, title: "et itaque necessitatibus maxime molestiae qui quas velit", completed: false, }, { userId: 2, id: 24, title: "adipisci non ad dicta qui amet quaerat doloribus ea", completed: false, }, { userId: 2, id: 25, title: "voluptas quo tenetur perspiciatis explicabo natus", completed: true, }, { userId: 2, id: 26, title: "aliquam aut quasi", completed: true, }, { userId: 2, id: 27, title: "veritatis pariatur delectus", completed: true, }, { userId: 2, id: 28, title: "nesciunt totam sit blanditiis sit", completed: false, }, { userId: 2, id: 29, title: "laborum aut in quam", completed: false, }, { userId: 2, id: 30, title: "nemo perspiciatis repellat ut dolor libero commodi blanditiis omnis", completed: true, }, { userId: 2, id: 31, title: "repudiandae totam in est sint facere fuga", completed: false, }, { userId: 2, id: 32, title: "earum doloribus ea doloremque quis", completed: false, }, { userId: 2, id: 33, title: "sint sit aut vero", completed: false, }, { userId: 2, id: 34, title: "porro aut necessitatibus eaque distinctio", completed: false, }, { userId: 2, id: 35, title: "repellendus veritatis molestias dicta incidunt", completed: true, }, { userId: 2, id: 36, title: "excepturi deleniti adipisci voluptatem et neque optio illum ad", completed: true, }, { userId: 2, id: 37, title: "sunt cum tempora", completed: false, }, { userId: 2, id: 38, title: "totam quia non", completed: false, }, { userId: 2, id: 39, title: "doloremque quibusdam asperiores libero corrupti illum qui omnis", completed: false, }, { userId: 2, id: 40, title: "totam atque quo nesciunt", completed: true, }, { userId: 3, id: 41, title: "aliquid amet impedit consequatur aspernatur placeat eaque fugiat suscipit", completed: false, }, { userId: 3, id: 42, title: "rerum perferendis error quia ut eveniet", completed: false, }, { userId: 3, id: 43, title: "tempore ut sint quis recusandae", completed: true, }, { userId: 3, id: 44, title: "cum debitis quis accusamus doloremque ipsa natus sapiente omnis", completed: true, }, { userId: 3, id: 45, title: "velit soluta adipisci molestias reiciendis harum", completed: false, }, { userId: 3, id: 46, title: "vel voluptatem repellat nihil placeat corporis", completed: false, }, { userId: 3, id: 47, title: "nam qui rerum fugiat accusamus", completed: false, }, { userId: 3, id: 48, title: "sit reprehenderit omnis quia", completed: false, }, { userId: 3, id: 49, title: "ut necessitatibus aut maiores debitis officia blanditiis velit et", completed: false, }, { userId: 3, id: 50, title: "cupiditate necessitatibus ullam aut quis dolor voluptate", completed: true, }, { userId: 3, id: 51, title: "distinctio exercitationem ab doloribus", completed: false, }, { userId: 3, id: 52, title: "nesciunt dolorum quis recusandae ad pariatur ratione", completed: false, }, { userId: 3, id: 53, title: "qui labore est occaecati recusandae aliquid quam", completed: false, }, { userId: 3, id: 54, title: "quis et est ut voluptate quam dolor", completed: true, }, { userId: 3, id: 55, title: "voluptatum omnis minima qui occaecati provident nulla voluptatem ratione", completed: true, }, { userId: 3, id: 56, title: "deleniti ea temporibus enim", completed: true, }, { userId: 3, id: 57, title: "pariatur et magnam ea doloribus similique voluptatem rerum quia", completed: false, }, { userId: 3, id: 58, title: "est dicta totam qui explicabo doloribus qui dignissimos", completed: false, }, { userId: 3, id: 59, title: "perspiciatis velit id laborum placeat iusto et aliquam odio", completed: false, }, { userId: 3, id: 60, title: "et sequi qui architecto ut adipisci", completed: true, }, { userId: 4, id: 61, title: "odit optio omnis qui sunt", completed: true, }, { userId: 4, id: 62, title: "et placeat et tempore aspernatur sint numquam", completed: false, }, { userId: 4, id: 63, title: "doloremque aut dolores quidem fuga qui nulla", completed: true, }, { userId: 4, id: 64, title: "voluptas consequatur qui ut quia magnam nemo esse", completed: false, }, { userId: 4, id: 65, title: "fugiat pariatur ratione ut asperiores necessitatibus magni", completed: false, }, { userId: 4, id: 66, title: "rerum eum molestias autem voluptatum sit optio", completed: false, }, { userId: 4, id: 67, title: "quia voluptatibus voluptatem quos similique maiores repellat", completed: false, }, { userId: 4, id: 68, title: "aut id perspiciatis voluptatem iusto", completed: false, }, { userId: 4, id: 69, title: "doloribus sint dolorum ab adipisci itaque dignissimos aliquam suscipit", completed: false, }, { userId: 4, id: 70, title: "ut sequi accusantium et mollitia delectus sunt", completed: false, }, { userId: 4, id: 71, title: "aut velit saepe ullam", completed: false, }, { userId: 4, id: 72, title: "praesentium facilis facere quis harum voluptatibus voluptatem eum", completed: false, }, { userId: 4, id: 73, title: "sint amet quia totam corporis qui exercitationem commodi", completed: true, }, { userId: 4, id: 74, title: "expedita tempore nobis eveniet laborum maiores", completed: false, }, { userId: 4, id: 75, title: "occaecati adipisci est possimus totam", completed: false, }, { userId: 4, id: 76, title: "sequi dolorem sed", completed: true, }, { userId: 4, id: 77, title: "maiores aut nesciunt delectus exercitationem vel assumenda eligendi at", completed: false, }, { userId: 4, id: 78, title: "reiciendis est magnam amet nemo iste recusandae impedit quaerat", completed: false, }, { userId: 4, id: 79, title: "eum ipsa maxime ut", completed: true, }, { userId: 4, id: 80, title: "tempore molestias dolores rerum sequi voluptates ipsum consequatur", completed: true, }, { userId: 5, id: 81, title: "suscipit qui totam", completed: true, }, { userId: 5, id: 82, title: "voluptates eum voluptas et dicta", completed: false, }, { userId: 5, id: 83, title: "quidem at rerum quis ex aut sit quam", completed: true, }, { userId: 5, id: 84, title: "sunt veritatis ut voluptate", completed: false, }, { userId: 5, id: 85, title: "et quia ad iste a", completed: true, }, { userId: 5, id: 86, title: "incidunt ut saepe autem", completed: true, }, { userId: 5, id: 87, title: "laudantium quae eligendi consequatur quia et vero autem", completed: true, }, { userId: 5, id: 88, title: "vitae aut excepturi laboriosam sint aliquam et et accusantium", completed: false, }, { userId: 5, id: 89, title: "sequi ut omnis et", completed: true, }, { userId: 5, id: 90, title: "molestiae nisi accusantium tenetur dolorem et", completed: true, }, { userId: 5, id: 91, title: "nulla quis consequatur saepe qui id expedita", completed: true, }, { userId: 5, id: 92, title: "in omnis laboriosam", completed: true, }, { userId: 5, id: 93, title: "odio iure consequatur molestiae quibusdam necessitatibus quia sint", completed: true, }, { userId: 5, id: 94, title: "facilis modi saepe mollitia", completed: false, }, { userId: 5, id: 95, title: "vel nihil et molestiae iusto assumenda nemo quo ut", completed: true, }, { userId: 5, id: 96, title: "nobis suscipit ducimus enim asperiores voluptas", completed: false, }, { userId: 5, id: 97, title: "dolorum laboriosam eos qui iure aliquam", completed: false, }, { userId: 5, id: 98, title: "debitis accusantium ut quo facilis nihil quis sapiente necessitatibus", completed: true, }, { userId: 5, id: 99, title: "neque voluptates ratione", completed: false, }, { userId: 5, id: 100, title: "excepturi a et neque qui expedita vel voluptate", completed: false, }, { userId: 6, id: 101, title: "explicabo enim cumque porro aperiam occaecati minima", completed: false, }, { userId: 6, id: 102, title: "sed ab consequatur", completed: false, }, { userId: 6, id: 103, title: "non sunt delectus illo nulla tenetur enim omnis", completed: false, }, { userId: 6, id: 104, title: "excepturi non laudantium quo", completed: false, }, { userId: 6, id: 105, title: "totam quia dolorem et illum repellat voluptas optio", completed: true, }, { userId: 6, id: 106, title: "ad illo quis voluptatem temporibus", completed: true, }, { userId: 6, id: 107, title: "praesentium facilis omnis laudantium fugit ad iusto nihil nesciunt", completed: false, }, { userId: 6, id: 108, title: "a eos eaque nihil et exercitationem incidunt delectus", completed: true, }, { userId: 6, id: 109, title: "autem temporibus harum quisquam in culpa", completed: true, }, { userId: 6, id: 110, title: "aut aut ea corporis", completed: true, }, { userId: 6, id: 111, title: "magni accusantium labore et id quis provident", completed: false, }, { userId: 6, id: 112, title: "consectetur impedit quisquam qui deserunt non rerum consequuntur eius", completed: false, }, { userId: 6, id: 113, title: "quia atque aliquam sunt impedit voluptatum rerum assumenda nisi", completed: false, }, { userId: 6, id: 114, title: "cupiditate quos possimus corporis quisquam exercitationem beatae", completed: false, }, { userId: 6, id: 115, title: "sed et ea eum", completed: false, }, { userId: 6, id: 116, title: "ipsa dolores vel facilis ut", completed: true, }, { userId: 6, id: 117, title: "sequi quae est et qui qui eveniet asperiores", completed: false, }, { userId: 6, id: 118, title: "quia modi consequatur vero fugiat", completed: false, }, { userId: 6, id: 119, title: "corporis ducimus ea perspiciatis iste", completed: false, }, { userId: 6, id: 120, title: "dolorem laboriosam vel voluptas et aliquam quasi", completed: false, }, { userId: 7, id: 121, title: "inventore aut nihil minima laudantium hic qui omnis", completed: true, }, { userId: 7, id: 122, title: "provident aut nobis culpa", completed: true, }, { userId: 7, id: 123, title: "esse et quis iste est earum aut impedit", completed: false, }, { userId: 7, id: 124, title: "qui consectetur id", completed: false, }, { userId: 7, id: 125, title: "aut quasi autem iste tempore illum possimus", completed: false, }, { userId: 7, id: 126, title: "ut asperiores perspiciatis veniam ipsum rerum saepe", completed: true, }, { userId: 7, id: 127, title: "voluptatem libero consectetur rerum ut", completed: true, }, { userId: 7, id: 128, title: "eius omnis est qui voluptatem autem", completed: false, }, { userId: 7, id: 129, title: "rerum culpa quis harum", completed: false, }, { userId: 7, id: 130, title: "nulla aliquid eveniet harum laborum libero alias ut unde", completed: true, }, { userId: 7, id: 131, title: "qui ea incidunt quis", completed: false, }, { userId: 7, id: 132, title: "qui molestiae voluptatibus velit iure harum quisquam", completed: true, }, { userId: 7, id: 133, title: "et labore eos enim rerum consequatur sunt", completed: true, }, { userId: 7, id: 134, title: "molestiae doloribus et laborum quod ea", completed: false, }, { userId: 7, id: 135, title: "facere ipsa nam eum voluptates reiciendis vero qui", completed: false, }, { userId: 7, id: 136, title: "asperiores illo tempora fuga sed ut quasi adipisci", completed: false, }, { userId: 7, id: 137, title: "qui sit non", completed: false, }, { userId: 7, id: 138, title: "placeat minima consequatur rem qui ut", completed: true, }, { userId: 7, id: 139, title: "consequatur doloribus id possimus voluptas a voluptatem", completed: false, }, { userId: 7, id: 140, title: "aut consectetur in blanditiis deserunt quia sed laboriosam", completed: true, }, { userId: 8, id: 141, title: "explicabo consectetur debitis voluptates quas quae culpa rerum non", completed: true, }, { userId: 8, id: 142, title: "maiores accusantium architecto necessitatibus reiciendis ea aut", completed: true, }, { userId: 8, id: 143, title: "eum non recusandae cupiditate animi", completed: false, }, { userId: 8, id: 144, title: "ut eum exercitationem sint", completed: false, }, { userId: 8, id: 145, title: "beatae qui ullam incidunt voluptatem non nisi aliquam", completed: false, }, { userId: 8, id: 146, title: "molestiae suscipit ratione nihil odio libero impedit vero totam", completed: true, }, { userId: 8, id: 147, title: "eum itaque quod reprehenderit et facilis dolor autem ut", completed: true, }, { userId: 8, id: 148, title: "esse quas et quo quasi exercitationem", completed: false, }, { userId: 8, id: 149, title: "animi voluptas quod perferendis est", completed: false, }, { userId: 8, id: 150, title: "eos amet tempore laudantium fugit a", completed: false, }, { userId: 8, id: 151, title: "accusamus adipisci dicta qui quo ea explicabo sed vero", completed: true, }, { userId: 8, id: 152, title: "odit eligendi recusandae doloremque cumque non", completed: false, }, { userId: 8, id: 153, title: "ea aperiam consequatur qui repellat eos", completed: false, }, { userId: 8, id: 154, title: "rerum non ex sapiente", completed: true, }, { userId: 8, id: 155, title: "voluptatem nobis consequatur et assumenda magnam", completed: true, }, { userId: 8, id: 156, title: "nam quia quia nulla repellat assumenda quibusdam sit nobis", completed: true, }, { userId: 8, id: 157, title: "dolorem veniam quisquam deserunt repellendus", completed: true, }, { userId: 8, id: 158, title: "debitis vitae delectus et harum accusamus aut deleniti a", completed: true, }, { userId: 8, id: 159, title: "debitis adipisci quibusdam aliquam sed dolore ea praesentium nobis", completed: true, }, { userId: 8, id: 160, title: "et praesentium aliquam est", completed: false, }, { userId: 9, id: 161, title: "ex hic consequuntur earum omnis alias ut occaecati culpa", completed: true, }, { userId: 9, id: 162, title: "omnis laboriosam molestias animi sunt dolore", completed: true, }, { userId: 9, id: 163, title: "natus corrupti maxime laudantium et voluptatem laboriosam odit", completed: false, }, { userId: 9, id: 164, title: "reprehenderit quos aut aut consequatur est sed", completed: false, }, { userId: 9, id: 165, title: "fugiat perferendis sed aut quidem", completed: false, }, { userId: 9, id: 166, title: "quos quo possimus suscipit minima ut", completed: false, }, { userId: 9, id: 167, title: "et quis minus quo a asperiores molestiae", completed: false, }, { userId: 9, id: 168, title: "recusandae quia qui sunt libero", completed: false, }, { userId: 9, id: 169, title: "ea odio perferendis officiis", completed: true, }, { userId: 9, id: 170, title: "quisquam aliquam quia doloribus aut", completed: false, }, { userId: 9, id: 171, title: "fugiat aut voluptatibus corrupti deleniti velit iste odio", completed: true, }, { userId: 9, id: 172, title: "et provident amet rerum consectetur et voluptatum", completed: false, }, { userId: 9, id: 173, title: "harum ad aperiam quis", completed: false, }, { userId: 9, id: 174, title: "similique aut quo", completed: false, }, { userId: 9, id: 175, title: "laudantium eius officia perferendis provident perspiciatis asperiores", completed: true, }, { userId: 9, id: 176, title: "magni soluta corrupti ut maiores rem quidem", completed: false, }, { userId: 9, id: 177, title: "et placeat temporibus voluptas est tempora quos quibusdam", completed: false, }, { userId: 9, id: 178, title: "nesciunt itaque commodi tempore", completed: true, }, { userId: 9, id: 179, title: "omnis consequuntur cupiditate impedit itaque ipsam quo", completed: true, }, { userId: 9, id: 180, title: "debitis nisi et dolorem repellat et", completed: true, }, { userId: 10, id: 181, title: "ut cupiditate sequi aliquam fuga maiores", completed: false, }, { userId: 10, id: 182, title: "inventore saepe cumque et aut illum enim", completed: true, }, { userId: 10, id: 183, title: "omnis nulla eum aliquam distinctio", completed: true, }, { userId: 10, id: 184, title: "molestias modi perferendis perspiciatis", completed: false, }, { userId: 10, id: 185, title: "voluptates dignissimos sed doloribus animi quaerat aut", completed: false, }, { userId: 10, id: 186, title: "explicabo odio est et", completed: false, }, { userId: 10, id: 187, title: "consequuntur animi possimus", completed: false, }, { userId: 10, id: 188, title: "vel non beatae est", completed: true, }, { userId: 10, id: 189, title: "culpa eius et voluptatem et", completed: true, }, { userId: 10, id: 190, title: "accusamus sint iusto et voluptatem exercitationem", completed: true, }, { userId: 10, id: 191, title: "temporibus atque distinctio omnis eius impedit tempore molestias pariatur", completed: true, }, { userId: 10, id: 192, title: "ut quas possimus exercitationem sint voluptates", completed: false, }, { userId: 10, id: 193, title: "rerum debitis voluptatem qui eveniet tempora distinctio a", completed: true, }, { userId: 10, id: 194, title: "sed ut vero sit molestiae", completed: false, }, { userId: 10, id: 195, title: "rerum ex veniam mollitia voluptatibus pariatur", completed: true, }, { userId: 10, id: 196, title: "consequuntur aut ut fugit similique", completed: true, }, { userId: 10, id: 197, title: "dignissimos quo nobis earum saepe", completed: true, }, { userId: 10, id: 198, title: "quis eius est sint explicabo", completed: true, }, { userId: 10, id: 199, title: "numquam repellendus a magnam", completed: true, }, { userId: 10, id: 200, title: "ipsam aperiam voluptates qui", completed: false, }, ];