Function DataTable

A table of data with columns and rows rendered based on user-specified objects. Also supports tree grids via the getChildren or getParents prop.

By default, DataTable is rendered as a <table> element (with style width: 100%) wrapped in a <div> whose class includes overflow: auto so that a scroll bar appears automatically when appropriate. Other than that, the table size is not constrained and will automatically choose its own size. One simple way to limit min/max table size is to add style={{ minHeight: N, maxHeight: M }}. If the table is within a container that has its own min/max height, it might be better to set display: flex; flex-direction: column on that container and also set style={{ flex: 1 }} on the DataTable. This way, the table fills available space while also allowing space for other widgets.

The table class includes table-layout: fixed and each <th> has an inline width controlled by the DataTableColumn.width value if you provided one. This is a
minimum width; if the table is wider than the total widths of all columns, your browser will distribute excess available space among the columns automatically. If the table is less wide than the total widths of all columns, a horizontal scroll bar will appear. Drag handles appear by default so the user can change column widths (but the user's custom widths are forgotten when the component is unmounted.)

Here's an example that shows a bunch of columns based on some simple { n: number } objects, and shows certain items in tree form. In this example, getParents regenerates a parent object every time it is called, and the result is that the user can't expand parent rows unless a getSelKey prop is provided. This is because when the user expands a parent, the table is re-rendered and the originally-expanded parent object is no longer in the table! getSelKey fixes the problem causing the sets of selected and expanded items to be sets of numbers rather than objects. However, TypeScript can't infer that the type returned by getSelKey is correct, so type parameters are needed on DataTable<{n: number}, number>.

 <DataTable<{n: number}, number>
     list={[ { n:1 }, { n:3 }, { n:5 }, { n:36 }, { n:100 } ]}
     selMode="multi"
     columns={[
         { 
             name: 'n',
             heading: 'Number',
             isTreeCol: true,
         },
         {
             name: 'Square', // Shown as the heading because `heading` is missing
             getValue(item: {n: number}) { return item.n * item.n; }
         },
         {
             name: 'Square root',
             getValue(item: {n: number}) { return Math.sqrt(item.n); }
         },
         {
             name: 'Odd?',
             getValue(item: {n: number}) { return (item.n & 1) !== 0; }
         },
     ]}
     getParents={item => {
         let root = Math.sqrt(item.n);
         return root === Math.round(root) ? [ { n: root } ] : undefined;
     }}
     getSelKey={item => item.n}
 />