Optional classThe list of columns to display in the table. These follow the tanstack table format https://tanstack.com/table/v8/docs/guide/column-defs
The list of data to display in the table.
Optional dropdownWhen provided, will append a column with a list of dropdown menu Items. This is provided as a function so that the list of actions can be dynamic for a given row of data
When provided, will append a column with a list of dropdown menu Items. This is provided as a function so that the list of actions can be dynamic for a given row of data
Optional dropdownCurrently opened dropdown menu. If not provided, this will be controlled by this component
Optional emptyConfiguration for empty state (when no data is provided). When not provided, the table will display with just headers when data is empty
Optional icon?: "done" | "search" | "anchor" | "link" | "3d_rotation" | "abc" | "accessibility" | "accessibility_new" | "access_time" | "accessible" | "accessible_forward" | "account_balance" | "account_balance_wallet" | "account_box" | "waving_hand" | "account_circle" | "add" | "add_card" | "add_home" | "add_photo_alternate" | "add_shopping_cart" | "add_task" | "add_to_drive" | "add_to_queue" | "addchart" | "admin_panel_settings" | "ads_click" | "alarm" | "alarm_add" | "alarm_off" | "alarm_on" | "all_inbox" | "analytics" | "android" | "announcement" | "api" | "app_blocking" | "approval" | "archive" | "arrow_back" | "arrow_circle_down" | "arrow_circle_left" | "arrow_circle_right" | "arrow_circle_up" | "arrow_drop_down" | "arrow_forward_ios" | "arrow_outward" | "arrow_right" | "arrow_right_alt" | "article" | "aspect_ratio" | "assessment" | "assignment" | "assignment_ind" | "assignment_late" | "assignment_return" | "assignment_returned" | "assignment_turned_in" | "assured_workload" | "autorenew" | "backup" | "backup_table" | "balance" | "batch_prediction" | "block" | "book" | "book_online" | "bookmark" | "bookmark_add" | "bookmark_added" | "bookmark_border" | "bookmark_remove" | "bookmarks" | "bug_report" | "build" | "build_circle" | "business" | "business_center" | "cached" | "calendar_month" | "calendar_today" | "calendar_view_week" | "camera_enhance" | "cancel" | "cancel_schedule_send" | "card_giftcard" | "card_membership" | "card_travel" | "chat" | "chat_bubble_outline" | "change_history" | "check" | "check_circle" | "check_circle_outline" | "chevron_left" | "chevron_right" | "chrome_reader_mode" | "circle_notifications" | "class" | "close" | "close_fullscreen" | "code" | "code_off" | "comment" | "comment_bank" | "commit" | "commute" | "compare_arrows" | "computer" | "compress" | "contact_page" | "contact_support" | "contactless" | "content_copy" | "copyright" | "credit_card" | "credit_card_off" | "css" | "currency_exchange" | "dangerous" | "dashboard" | "dashboard_customize" | "data_exploration" | "data_thresholding" | "date_range" | "delete" | "delete_forever" | "delete_outline" | "density_large" | "density_medium" | "density_small" | "description" | "disabled_by_default" | "disabled_visible" | "display_settings" | "dns" | "done_all" | "done_outline" | "donut_large" | "donut_small" | "drag_indicator" | "dynamic_form" | "edit" | "edit_calendar" | "edit_off" | "eject" | "email" | "error_outline" | "euro_symbol" | "event" | "event_repeat" | "event_seat" | "exit_to_app" | "expand" | "expand_more" | "explore" | "explore_off" | "extension" | "extension_off" | "face" | "fact_check" | "favorite" | "favorite_border" | "fax" | "feedback" | "file_present" | "file_upload" | "filter_alt" | "find_in_page" | "find_replace" | "fingerprint" | "fit_screen" | "flaky" | "flight_land" | "flight_takeoff" | "flip_to_back" | "flip_to_front" | "flutter_dash" | "free_cancellation" | "front_hand" | "g_translate" | "gavel" | "generating_tokens" | "get_app" | "gif" | "grade" | "grading" | "group_work" | "handshake" | "help" | "help_center" | "help_outline" | "hide_source" | "highlight_alt" | "highlight_off" | "history" | "history_toggle_off" | "hls" | "hls_off" | "home" | "home_work" | "hourglass_disabled" | "hourglass_empty" | "hourglass_full" | "html" | "http" | "https" | "google" | "important_devices" | "info" | "input" | "insert_emoticon" | "install_desktop" | "install_mobile" | "integration_instructions" | "javascript" | "join_full" | "join_inner" | "join_left" | "join_right" | "keyboard_arrow_down" | "keyboard_arrow_up" | "label" | "label_important" | "label_off" | "language" | "launch" | "leaderboard" | "lightbulb" | "lightbulb_circle" | "line_style" | "line_weight" | "list" | "lock" | "lock_clock" | "lock_open" | "lock_person" | "lock_reset" | "login" | "logout" | "loyalty" | "mail" | "mail_outline" | "manage_accounts" | "manage_history" | "map" | "maps_home_work" | "mark_as_unread" | "markunread_mailbox" | "maximize" | "mediation" | "menu" | "menu_book" | "menu_open" | "minimize" | "model_training" | "mood" | "more_vert" | "move_to_inbox" | "network_ping" | "new_label" | "next_plan" | "nightlight_round" | "no_accounts" | "noise_control_off" | "not_accessible" | "not_started" | "note_add" | "notifications" | "offline_bolt" | "offline_pin" | "on_device_training" | "online_prediction" | "opacity" | "open_in_browser" | "open_in_full" | "open_in_new" | "open_in_new_off" | "open_with" | "outbound" | "outbox" | "outlet" | "output" | "pageview" | "paid" | "pan_tool" | "pan_tool_alt" | "payment" | "payments" | "pending" | "pending_actions" | "people_outline" | "percent" | "person" | "perm_camera_mic" | "perm_contact_calendar" | "perm_data_setting" | "perm_device_information" | "perm_identity" | "perm_media" | "perm_phone_msg" | "perm_scan_wifi" | "pets" | "php" | "picture_in_picture" | "picture_in_picture_alt" | "pin_invoke" | "pinch" | "plagiarism" | "play_for_work" | "polymer" | "power_settings_new" | "pregnant_woman" | "preview" | "print" | "privacy_tip" | "private_connectivity" | "production_quantity_limits" | "phone" | "public" | "public_off" | "published_with_changes" | "query_builder" | "question_answer" | "question_mark" | "quickreply" | "receipt" | "record_voice_over" | "redeem" | "remove_done" | "remove_shopping_cart" | "reorder" | "repartition" | "report_problem" | "request_page" | "restart_alt" | "restore" | "restore_from_trash" | "restore_page" | "rocket" | "rocket_launch" | "room" | "rounded_corner" | "rowing" | "rule" | "satellite_alt" | "saved_search" | "savings" | "schedule" | "schedule_send" | "school" | "search_off" | "segment" | "send" | "send_and_archive" | "sensors" | "sensors_off" | "settings" | "settings_accessibility" | "settings_applications" | "settings_backup_restore" | "settings_bluetooth" | "settings_brightness" | "settings_cell" | "settings_ethernet" | "settings_input_antenna" | "settings_input_component" | "settings_input_composite" | "settings_input_hdmi" | "settings_input_svideo" | "settings_overscan" | "settings_phone" | "settings_power" | "settings_remote" | "settings_voice" | "shop" | "shop_2" | "shop_two" | "shopping_bag" | "shopping_basket" | "shopping_cart" | "shopping_cart_checkout" | "smart_button" | "source" | "space_dashboard" | "spatial_audio" | "spatial_audio_off" | "spatial_tracking" | "speaker_notes" | "speaker_notes_off" | "spellcheck" | "star_rate" | "stars" | "sticky_note_2" | "store" | "subject" | "subtitles_off" | "supervised_user_circle" | "supervisor_account" | "support" | "swap_horiz" | "swap_horizontal_circle" | "swap_vert" | "swap_vertical_circle" | "swipe" | "swipe_down" | "swipe_down_alt" | "swipe_left" | "swipe_left_alt" | "swipe_right" | "swipe_right_alt" | "swipe_up" | "swipe_up_alt" | "swipe_vertical" | "switch_access_shortcut" | "switch_access_shortcut_add" | "sync_alt" | "system_update_alt" | "tab" | "tab_unselected" | "table_view" | "task_alt" | "terminal" | "text_rotate_up" | "text_rotate_vertical" | "text_rotation_angledown" | "text_rotation_angleup" | "text_rotation_down" | "text_rotation_none" | "theaters" | "thumb_down_off_alt" | "thumb_up" | "thumb_up_off_alt" | "thumbs_up_down" | "tips_and_updates" | "toc" | "today" | "toll" | "touch_app" | "track_changes" | "transcribe" | "translate" | "trending_down" | "trending_flat" | "trending_up" | "troubleshoot" | "try" | "turned_in" | "unfold_less_double" | "unfold_more_double" | "unpublished" | "update" | "update_disabled" | "upgrade" | "verified" | "verified_user" | "view_agenda" | "view_array" | "view_carousel" | "view_column" | "view_comfy_alt" | "view_compact_alt" | "view_cozy" | "view_day" | "view_headline" | "view_in_ar" | "view_kanban" | "view_list" | "view_module" | "view_quilt" | "view_sidebar" | "view_stream" | "view_timeline" | "view_week" | "visibility" | "visibility_off" | "voice_over_off" | "watch_later" | "warning_amber" | "webhook" | "width_full" | "width_normal" | "width_wide" | "wifi_protected_setup" | "work" | "work_history" | "work_off" | "work_outline" | "wysiwyg" | "youtube_searched_for" | "zoom_in" | "sound_detection_dog_barking" | "zoom_out"The icon to display when there is no data
The message to display when there is no data
The initial state of the table. Use this when the table should start with some state already configured. For example if there is a default starting sort order
Optional isShow loading state for this table. Loading states appear above the currently shown data.
Optional ononNavigate callback
onNavigate callback
Optional onCallback when the state changes
Callback when the state changes
Optional paginationWhen passed, shows pagination component at the bottom of the table with the callback when the page is changed
Optional rowWhen passed, creates a link on the given row If undefined/null is returned, do not make the row link
When passed, creates a link on the given row If undefined/null is returned, do not make the row link
Optional setCallback when the opened dropdown menu changes
Callback when the opened dropdown menu changes
Optional tableCurrent table state. This can be a partial, which means that tanstack will manage the state for you (an uncontrolled component) As best practice, provide the state for any features you are using in the table and manage them on the block level.
Generated using TypeDoc
Custom class to give the html component