A File Grid will display a list of files or folders, which can be public or private.
The grid will be sortable by name, updated, downloads, comments and likes.
The grid of files also supports paging, by default displaying five files or folders per page.

How to Create a File Grid

The first step is to create a div element in the HTML file, which the grid will attach to.
Give the div an ID like the following

<div id="gridDiv"></div>

The second step is to instantiate a grid object in the Javascript file.
The files dom.js and FileGrid.js are needed so these will be added to the require statement

require(["sbt/dom", "sbt/connections/controls/files/FileGrid"],

function(dom, FileGrid) {

Now a file grid object is created and a type is passed to the file grid constructor

var grid = new FileGrid({

type:"library"

});

Here the type is set as library which will show the authenticated user's files.
Other valid types are:

"publicFiles"

This will show public files.

"folder"

This will show the authenticated user's folders.

"publicFolders"

This will show public folders.

"pinnedFiles"

his will show pinned files, pinned files are comparable to "favourited" files.

"pinnedFolders"

This will show pinned folders.

"recycledFiles"

This will show files that have been deleted and are in the "thrash".

"activeFolders"

Shows folders that contain files.

When the grid object is created it is attached to the page. This is done by getting a reference to the div specified in the
HTML file and calling that elements appendChild() function.

dom.byId("gridDiv").appendChild(grid.domNode);

Finally the grids update() function is called, this will retrieve and display the data from the server.

grid.update();

Other File Grid Options

It is also possible to show a grid of comments for a file. This is done by adding additional arguments to the FileGrid

var grid = new FileGrid({

type : "fileComments",

userId : userId,

documentId : documentId

});

The type is set to "fileComments" and a userId and documentId are also set, this will show comments that the specified user made on the
specified file.

You can also show a grid of files which you are sharing or that are being shared with you.

var grid = new FileGrid({

type : "fileShares",

direction : "outbound"

});

Set the type to "fileShares" and set direction to "outbound" to see which files the authenticated user is sharing
or set direction to "inbound" to see which files are being shared with the authenticated user.

File Pinning

Any of the Grids that display files have the options to show which files are pinned
this is off by default because it requires an additional call to server
if you wish to use this functionality, use the pinFile:true paramter like below

var grid = new FileGrid({

type: "library",

pinFile: true

});

If you are not using OneUI CSS, you will need to create a CSS class for pinned files and another for unpinned files.
When you have created these set the GridRenderers pinnedFileClass and unPinnedFilesClass to use them like below.